css - 在 div 内裁剪居中图像

Question

我有一个包含图像 (img) 元素的 div，它在其中扩展了 100% 的宽度。我想为 div 指定一个最大高度，并隐藏图像中超过这个高度的部分。但我也想让这张图片在 div 内垂直居中，只显示它的中心部分。

例如，如果浏览器宽度为 1200 像素，图片纵横比为 4:3，则图片应显示为 (1200x900) 像素。但是，如果我们只想将高度裁剪到 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');
}