如何将裁切图像（<img>）裁剪到stream体宽度容器中

当stream体宽度（基于百分比）的容器太小而不能显示整个图像时，如何获得图像以保持居中？

我怎样才能将图像集中在它的容器中

这意味着当容器太小时，它应该显示图像的中间而不是侧面。

Answer 1

当它工作

你可能有一个容器，容纳一些内容，比如两个彼此相邻的50％宽的<div> 。 对于这个例子，我们只能说明容器的一个孩子：

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

当它破裂

由于我们正在处理百分比，并可能使用响应式devise，所以情况可能并非总是如此。 如果.content比img更薄，则会发生裁剪：

问题

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

解决scheme

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

 .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! */ } 

Answer 2

对于新的浏览器，你可以翻译它

 figure{ width: 100%; text-align: center; overflow: hidden; } img{ position: relative; left: 50%; transform: translate(-50%,0) } 

为了支持IE8，你仍然可以使用@BryceHanscomb的上述技术。

 .no-csstransforms figure img { left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ } 

Answer 3

如果您预期要显示的图像比显示容器长得多，则将左侧设置为100％。 剩余：-200％; （从布莱斯的答案）可能不足以获得图像的中心部分。 只要把这两个比例更大。 确保另一半是另一半。

 left: 500%; margin-left: -1000%;