解决方法
当它工作
您可能有一个容器，其中包含一些内容，例如两个< 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! */
}
