Css 裁剪和居中宽图像

如何在gallery预览中自动裁剪图像，以便从左侧和右侧剪切宽图像？准确显示图像的中心部分，如所附图片所示：

我有这样的结构：

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

我只想使用CSS而不使用javascript来完成此操作。

---

负边距（固定）是不可能的，因为我的图片的宽度可能会非常不同。

我通常使用的是以下内容：

.container{
高度：100px；
宽度：120px；
溢出：隐藏；
位置：相对位置；
}
.集装箱img{
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

---

您可以使用左、右高负值的绝对定位。
此组合宽度

边距：0 auto

将使容器中的图像居中，使左右部分溢出：

div{
位置：相对位置；
宽度：300px；
高度：150像素；
溢出：隐藏；
}
img{
位置：绝对位置；
显示：块；
左：-100%；右：-100%；
高度：100%；宽度：自动；
保证金：0自动；
}
/***为了演示***/
div{margin:0 auto；border:1px纯红色；溢出：可见；}img{z-index:-1；}

---

我认为最简单的方法是将图像设为背景图像，并将其居中放置

基本上设置

.wrapper

div的背景图像如下：

<div class="wrapper" style="background-image: url(/images/your-image.jpg)">
</div>

.wrapper {
  width: 120px; //Or whatever width you need it to be.
  height: 100px;  //Or whatever height you need it to be.
  background-size: cover;
  background-position: center;
}

---

这确实使用了一些内联样式，有些人不喜欢这种样式，但它确实有效，而且很简单。

有效！添加一点（“高度：100%”到图像-用于拉伸）酷。谢谢@Maxick我确实提到过你应该增加高度，以达到与你的图像相似的效果。我通常使用此代码来拉伸背景视频（如果您将

min width

和

min height

设置为100%，它很好地覆盖了整个区域），这是怎么回事？这样我就可以纠正我的问题了。