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

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

在这里输入图像说明

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

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

当它工作

你可能有一个容器,容纳一些内容,比如两个彼此相邻的50%宽的<div> 。 对于这个例子,我们只能说明容器的一个孩子: 在这里输入图像说明

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

当它破裂

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

在这里输入图像说明

问题

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

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

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

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

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