javascript - 如果图像高度超过图像宽度，通过裁剪图像的顶部和底部来垂直居中图像 - 仅使用 CSS 可能吗？

Question

假设您事先不知道图像元素的高度和宽度，假设在图像高度大于图像宽度的情况下，您希望通过裁剪相同的量使图像垂直居中的像素形成它的顶部和底部，这样新的图像高度与图像宽度相匹配。例如，如果图片的宽度为 200 像素，高度为 250 像素，则从其顶部和底部裁剪 25 像素。

这是一个示例设置:

HTML:

<div class = 'cell'>
  ...
  <div class = 'image_container'> 
     ... 
     <img ...> 
  </div>
</div>

CSS:

.cell {
    display: inline-block;
    float: left;
    /* width will be changed by use of '@media screen'.
       Smaller browser window -> larger width */
    width: 31%;
}

.image_container {
    position: relative;
    float: left;
    width: 100%;
}

.image_container > img {
    width: 100%;
}

是否可以仅使用 CSS 来完成上述居中/裁剪操作，还是必须为此使用 javascript/jquery？

Answer 1

您可以使用 object-fit CSS 属性。它的行为很像 background-size 属性。

.image_container > img {
    object-fit: contain;
}

请注意，截至目前(2016 年 10 月)，这还没有完整的浏览器支持，因此您可能需要考虑将图像设置为 div 上的背景并使用 background-position和 background-size来处理这个而不是 <img>标签。

.image_container {
  height: 300px;
  background-color: cornflowerblue;
  image-rendering: pixelated;

  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200px;
}

<div class="image_container"></div>