CSS 如何在流体宽度容器中居中裁剪图像 (<img>)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18247356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center crop an image (<img>) in fluid width container
提问by Bryce
How do I get an image to stay centered when its fluid width (percentage based) container is too small to show the whole image?
当其流体宽度（基于百分比）容器太小而无法显示整个图像时，如何使图像保持居中？
How can I center the image inside it's container
如何将图像居中放置在容器内
This means it should show the middle of the image instead of the sides when container is too small.
这意味着当容器太小时，它应该显示图像的中间而不是侧面。
回答by Bryce
When It Works
何时有效
You might have a container that holds some content such as two <div>s that are 50% wide each, sitting next to each other. For this example, we can illustrate just one child of the container:
您可能有一个容器，其中包含一些内容，例如两个<div>s，每个 50% 宽，并排坐在一起。对于此示例，我们可以仅说明容器的一个子项：
We'll name outer rectangle .container, the inner rectangle .contentand the image img. This arrangement is perfectly fine, as long as .contentis always wider than img.
我们将命名为外矩形.container、内矩形.content和图像img。这种安排非常好，只要.content总是比 宽img。
When It Breaks
当它破裂时
Since we're dealing with percentages and probably working with a responsive design, this may not always be the case. If .contentis ever thinner than img, cropping will occur:
由于我们正在处理百分比并且可能使用响应式设计，因此情况可能并非总是如此。如果.content比 更薄img，则会发生裁剪：
The Problem
问题
If the most interesting part of imgis in the center, we need to get the browser to crop both edges evenly - leaving the best part of it visible, no matter what width of .contentis.
如果最有趣的部分img在中心，我们需要让浏览器均匀地裁剪两个边缘——不管 的宽度.content是多少，最好的部分都是可见的。
The Solution
解决方案
Fortunately, a solution is possible. Even better, no extra markup is required.
幸运的是，解决方案是可能的。更好的是，不需要额外的标记。
.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! */
}
回答by Gabriela Gabriel
For new browsers, you can translate it
对于新的浏览器，您可以翻译它
figure{
width: 100%;
text-align: center;
overflow: hidden;
}
img{
position: relative;
left: 50%;
transform: translate(-50%,0)
}
To support IE8, you can still use the technique presented above by @BryceHanscomb.
为了支持 IE8，您仍然可以使用@BryceHanscomb 上面介绍的技术。
.no-csstransforms figure img {
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
}
回答by jbdeguzman
If you are anticipating that the image to be displayed will be so much longer than the display container, setting left: 100%; and margin-left: -200%; (from Bryce's answer) might not be enough to get the center part of the image. Just put a bigger percentage for both. Make sure that the other is half of the other though.
如果您预计要显示的图像将比显示容器长得多，请设置 left: 100%; 和 margin-left: -200%; （来自布莱斯的回答）可能不足以获得图像的中心部分。只需为两者设置更大的百分比。确保另一个是另一个的一半。
left: 500%;
margin-left: -1000%;
回答by Thunder
I had the same problem but the solutions here didn't help me (because I'm displaying inside a table and because I wanted the image to change without having to scale it manually every time as the image was sent by clients)
我遇到了同样的问题，但这里的解决方案对我没有帮助（因为我在表格内显示，并且因为我希望图像无需每次在客户端发送图像时手动缩放）
Here's what I found, much more effecitve and easier :
这是我发现的，更有效和更容易：
img {
object-fit: cover;
width: 150px;
height: 150px;
}
