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');
}

Answer 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;
}

这是另一支笔，探索这个，垂直对齐：中间和一个几乎没有高度的图像。http://codepen.io/gc-nomade/pen/DxCgv

当然，如果您的内容没有任何意义，那么在后台中心设置的图像很容易。

Answer 3

所以你想让div作为图像的查看窗口吗？这听起来像图像精灵（每个图标单独显示的大图片放在一起），但图像更大：

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

如果您提供JSFiddle，我可以为您提供更具体的内容。

div内的裁剪中心图像

3 个答案:

HTML

SCSS

javascript（这仅用于响应）