您可能有一个容器，其中包含一些内容，例如两个< div> s，每个宽度为50％，彼此相邻。对于这个例子，我们可以仅仅说明容器的一个孩子：

我们将命名外部矩形.container，内部矩形.content和图像img。这种安排是完全正常的，只要。内容总是比img宽。

当它打破

由于我们处理的百分比和可能使用响应式设计，这可能不总是这样。如果.content比img薄，会出现裁剪：

问题

如果img最有趣的部分是在中心，我们需要让浏览器均匀地裁剪两个边缘 – 留下最好的部分可见，无论.content的宽度。

解决方案

幸运的是，一个解决方案是可能的。更好的是，不需要额外的标记。

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}