在 div 内裁剪居中的图像答案

【问题标题】：Crop centered image inside div在 div 内裁剪居中的图像
【发布时间】：2013-12-24 06:56:24
【问题描述】：

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

例如，如果浏览器宽度为 1200 像素，图像纵横比为 4:3，则图像应显示 (1200x900) 像素。但是，如果我们只想将高度裁剪为 300px 并垂直居中，则图像应位于 div 内的 -300px 处（并且 div 应隐藏图像高度的 0-300 和 600-900）。可以对其他宽度进行类似的思考。

我很确定这可以使用 javascript 轻松完成，但我想知道是否也可以使用 CSS 来完成。提前致谢！

【问题讨论】：

标签： css image html center crop

【解决方案1】：

所以您希望 div 充当图像的查看窗口？这听起来像图像精灵（一张大的图标放在一起，每个图标单独显示），但图像更大：

http://www.w3schools.com/css/css_image_sprites.asp

如果你提供一个 JSFiddle，我可以给你一些更具体的东西。

【讨论】：

【解决方案2】：

你可能想看看这个问题：Resizeing an oversized image using overflow:hidden and keep the aspect ratio

http://codepen.io/gcyrillus/pen/Grbxg

.grid_3 { width:260px; margin:0 20px; float:left;  text-align:center;
  overflow:hidden;background:rgba(255,255,255,0.02);}

.grid_3 a {
  display:block;  
  height:171px; border:solid 2px #FFFFFF;
  line-height:168px;
  overflow:hidden;
  margin-bottom:10px;
}
.max-img-border {  width:100%; margin:-100% 0;vertical-align:middle;
}

这是另一支笔，正在探索这个，vertical-align:middle 和一个几乎没有高度变化的图像。http://codepen.io/gc-nomade/pen/DxCgv

当然，如果在你的内容中没有任何意义，背景中心的图像设置是很容易的。

【讨论】：

overflow:hidden 拯救了我的一天！

【解决方案3】：

我对此的看法：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');
}

【讨论】：