div内的裁剪中心图像

Question

我有一个包含图像(img)元素的div,它在其内部延伸100%宽度.我想指定div的最大高度,并隐藏超过此高度的图像部分.但我也想让这个图像垂直居中于div内,只显示它的中心部分.

例如,如果浏览器宽度为1200像素且图像宽高比为4:3,则应显示图像(1200x900)px.但是如果我们想要将高度裁剪为仅300px并垂直居中,则图像应位于div内的-300px处(并且div应隐藏图像高度的0-300和600-900).其他人也可以采取类似的想法.

我很确定这可以通过javascript轻松完成,但我想知道是否有办法用CSS也可以.提前致谢!

Answer 1

我对此的看法是:http://codepen.io/vsync/pen/DpmnK

HTML

<div class='box'>
  <img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>

SCSS

.box{
  // this is the image container distentions 
  width:100%;
  height:100px;

  // The magic
  > img{
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%); 
    &.max{ width:auto; height:100%; }
  }
}

javascript(这仅用于响应)

var photo     = document.images[0],
    container = document.querySelector('.box');

$(window).on('resize.coverPhoto', function(){
  requestAnimationFrame(checkRatio);
});

function checkRatio(){
  var state = photo.clientHeight <= container.clientHeight && 
              photo.clientWidth >= container.clientWidth;

  photo.classList[state ? 'add' : 'remove']('max');
}