首页 文章

div内的裁剪中心图像

提问于
浏览 次
2

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

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

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

css image html center crop

3 回答

  • 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');
}
    回复于
  • 6

    你可能想看看这个问题：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

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

    回复于
  • 0

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

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

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

    回复于

相关问题