css - 裁剪和居中宽图像

Question

我如何在图库预览中自动裁剪图像，以便在左右两侧截断宽幅图像？如附图所示准确显示图像的中心部分:

我有这样的结构:

<div class="wrapper" style="overflow: hidden; height: 100px; width: 120px;">
    <div class="container">
        <img />
    </div>
</div>

我想只使用 CSS 而不使用 javascript。
负边距(固定)是不可能的，因为我的图片宽度可能非常不同。

Answer 1

我通常使用的是:

.container {
  height: 100px; 
  width: 120px; 
  overflow: hidden;
  position: relative;
}
.container img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

<div class="container">
<img src="http://placehold.it/400x350" />
</div>

这适用于任何图像尺寸。您甚至可以为图像添加高度以将其高度(如图像中的高度)限制为容器高度(然后它只会切割图像的左侧和右侧)。您可以将它用于任何元素，包括 video。