如果图像高度超过图像宽度，垂直中心图像通过裁剪它的顶部和底部-可能只有CSS?

Given a scenario where you don't know the height and width of image elements in advance, let's say that in cases where image height is greater than image width, you'd like to vertically center the image by cropping the same amount of pixels form its top and bottom, such that the new image height matches the image width. For example, if an image has a width of 200px, and its height is 250px, crop 25px from its top and from its bottom.

给定一个场景,你不知道提前图像元素的高度和宽度,假设在图像高度大于图像宽度的情况下,你想要垂直中心种植相同数量的像素的图像形成它的顶部和底部,这样新形象的高度匹配图像的宽度。例如，如果图像的宽度为200px，其高度为250px，则从顶部和底部裁剪25px。

Here's an example setup:

这里有一个例子设置:

HTML:

HTML:

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

CSS:

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

Is it possible to accomplish the aforementioned center/crop operation using only CSS, or is it necessary to use javascript/jquery for this?

是否可以只使用CSS完成上述的中心/裁剪操作，或者是否需要使用javascript/jquery ?

2 个解决方案

#1

You can use the object-fit CSS attribute. It acts a lot like the background-size attribute.

您可以使用object-fit CSS属性。它很像backearth -size属性。

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

Note that this doesn't have full browser support as of now (October 2016) so you may want to look into setting the image as a background on a div and using background-position and background-size to deal with this instead of an <img> tag.

注意，目前(2016年10月)还没有完全的浏览器支持，所以您可能需要考虑将图像设置为div的背景，并使用背景位置和背景大小来处理这个，而不是一个标记。

.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>

#2

.cover_image {
  height: 400px;
  background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center;
  background-size: cover;
}

<div class="cover_image"></div>