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

Answer 2

您可能需要查看以下問題： 使用overflow：hidden調整超大圖像的大小並保持縱橫比

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，我可以給你一些更具體的東西。