CSS 如果图像比容器宽，如何将图像居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3300660/
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 do I center an image if it's wider than its container?
提问by CannibalSmith
Normally, you center images with display: block; margin: auto, but if the image is larger than the container, it overflows to the right. How do I make it overflow to the both sides equally? The width of the container is fixed and known. The width of the image is unknown.
通常，您使用display: block; margin: auto将图像居中，但如果图像大于容器，则会向右溢出。我如何让它均匀地溢出到两边？容器的宽度是固定且已知的。图像的宽度未知。
采纳答案by jessegavin
HTML
HTML
?<div class="image-container">
<img src="http://www.google.com/images/logo.gif" height="100" />
</div>?
CSS
CSS
.image-container {
width: 150px;
border: solid 1px red;
margin:100px;
}
.image-container img {
border: solid 1px green;
}
jQuery
jQuery
$(".image-container>img").each(function(i, img) {
$(img).css({
position: "relative",
left: ($(img).parent().width() - $(img).width()) / 2
});
});
?
?
See it on jsFiddle: http://jsfiddle.net/4eYX9/30/
在 jsFiddle 上查看：http: //jsfiddle.net/4eYX9/30/
回答by ScottS
A pure css solution
纯css解决方案
Requiring one extra wrapper (tested in FireFox, IE8, IE7):
需要一个额外的包装器（在 FireFox、IE8、IE7 中测试）：
Improved Answer
改进的答案
There was a problem with the original answer (below). If the image is larger than the container that outeris centered on with it's auto margins, then it truncates the image on the left and creates excessivespace on the right, as this fiddle shows.
原始答案（如下）有问题。如果图像大于outer使用自动边距居中的容器，则它会截断左侧的图像并在右侧创建过多的空间，如该小提琴所示。
We can resolve that by floating innerright and then centering fromthe right. This still truncates the imgoff the page to the left, but it does so by explicitly pushing it that way and then centers back off of that, the combination of which is what prevents the extrahorizontal scroll on the right. Now we only get as much right scroll as we need in order to see the right part of the image.
我们可以通过inner向右浮动然后从右侧居中来解决这个问题。这仍然img会向左侧截断页面，但它是通过明确地将其推向那个方向然后将其中心向后截断来实现的，这两种方式的组合防止了右侧额外的水平滚动。现在，我们只能获得所需的正确滚动量，以便查看图像的正确部分。
Fiddle Example(Borders in fiddle are for demo only.)
小提琴示例（小提琴中的边框仅用于演示。）
Essential CSS
基本 CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
position:relative;
float: right; /* this was added and display removed */
right: 50%;
}
div.inner img {
position: relative;
right:-50%; /* this was changed from "left" in original */
}
If you desire noright scroll at all for wide images
如果您根本不想要宽幅图像的正确滚动
Then using the above, also set whatever element wraps outer(like bodyor a third wrapper) to have overflow: hidden.
然后使用上述内容，还将任何元素包装outer（如body或第三个包装器）设置为 has overflow: hidden。
Original Idea (for History)
原始想法（历史）
Fiddle Example(Borders in fiddle are for demo only.)
小提琴示例（小提琴中的边框仅用于演示。）
HTML
HTML
<div class="outer">
<div class="inner">
<img src="/yourimage.png">
</div>
</div>
CSS
CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
display: inline-block;
position:relative;
right: -50%;
}
div.inner img {
position: relative;
left:-50%;
}
回答by Sasha
Here's a 2 line CSS solution (a couple more lines might be required for cross-browser support):
这是一个 2 行 CSS 解决方案（跨浏览器支持可能需要多几行）：
img {
margin-left: 50%;
transform: translateX(-50%);
}
回答by fuermosi777
Alternative pure CSS solution is to use transformattribute:
另一种纯 CSS 解决方案是使用transform属性：
HTML:
HTML：
<div class="outer">
<img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
CSS:
CSS：
.outer {
position: relative;
width: 100px;
border: 1px solid black;
height: 150px;
margin-left: 100px; /* for demo */
/* overflow: hidden; */
}
img.image {
width: 200px;
opacity: 0.7;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
Just to add a overflow:hiddento parent divto hide the extra area of the image.
只是向overflow:hidden父级添加一个以div隐藏图像的额外区域。
回答by BalusC
Your best bet is to set it as background imageof the container instead.
最好的办法是将其设置为容器的背景图像。
#container {
background: url('url/to/image.gif') no-repeat center top;
}
回答by Noémien Kocher
In fact there is a simpler pure css/html way (without large horizontal scroll) :
事实上，有一种更简单的纯 css/html 方式（没有大的水平滚动）：
Html:
网址：
<div class="outer">
<img src="/my/sample/image.jpg">
</div>
Css:
css:
If you don't want to see image overflow
如果您不想看到图像溢出
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: hidden;
position: relative;
height: 200px;
}
With image overflow visible
图像溢出可见
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: visible;
position: relative;
height: 200px;
}
body, html {
overflow-x:hidden;
}
A backgroundsolution with image overflow visible :
甲背景用图像溢出可见溶液：
Html:
网址：
<div class="outer">
<div class="inner"></div>
</div>
Css:
css:
div.outer {
width: 100%;
height: 200px;
}
div.inner {
background: url('/assets/layout/bg.jpg') center no-repeat;
position: absolute;
left: 0;
width: 100%;
height: inherit;
}
assuming outer is in a width specified container.
假设外部位于指定宽度的容器中。
回答by Pat
I can only think of a Javascript solution since what you need to do is relatively position the image a negative amount to the left of its container:
我只能想到一个 Javascript 解决方案，因为您需要做的是将图像相对定位到其容器左侧的负数：
jQuery
jQuery
$(document).ready(function(){
var theImg = $('#container img');
var theContainer = $('#container');
if(theImg.width() > theContainer.width()){
theImg.css({
position: 'relative',
left: (theContainer.width() - theImg.width()) / 2
})
}
})
回答by Cezar D.
I found this to be a more elegant solution, without flex, similar to something above, but more generalized (applies on both vertical and horizontal):
我发现这是一个更优雅的解决方案，没有 flex，类似于上面的东西，但更通用（适用于垂直和水平）：
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
回答by qw3n
I don't think there is a pure CSS solution (Except for the next answer :)). However with Javascript it would be just a matter of finding the width of the image, subtracting the container width, dividing by two and you have how far to the left of the container you need.
我认为没有纯 CSS 解决方案（除了下一个答案:)）。但是，对于 Javascript，只需找到图像的宽度，减去容器宽度，除以 2，您就可以得到需要的容器左侧多远。
