Html 将未知大小的大图像放在较小的 div 中，并隐藏溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19673895/
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
Center a large image of unknown size inside a smaller div with overflow hidden
提问by HymanMahoney
I would like to center an img inside a div without javascriptand without background-images.
我想在没有 javascript和background-images的 div 中居中 img 。
Here is some example code
这是一些示例代码
<div>
<img src="/happy_cat.png"/>
</div>
- I don't know the size of the img and it should be able to exceed the width of the parent
- I don't know the width of the parent div (it is 100%)
- The parent div has a fixed height
- The image is larger than the parent and the parent has overflow:hidden
- Only need to support modern browsers
- 我不知道 img 的大小，它应该能够超过父级的宽度
- 我不知道父 div 的宽度（它是 100%）
- 父 div 具有固定高度
- 图像大于父级且父级溢出：隐藏
- 只需要支持现代浏览器
Desired result. (Ignore opacities etc, just note the positioning).
想要的结果。（忽略不透明度等，只需注意定位）。
I know this can be done easily with background images but that isn't an option for me. I could also use javascript but it seems like a very heavy handed way to achieve this.
我知道这可以通过背景图像轻松完成，但这对我来说不是一个选择。我也可以使用 javascript，但这似乎是实现这一目标的一种非常笨拙的方法。
Thanks!
谢谢！
Hyman
Hyman
回答by Evan Layman
What about this:
那这个呢：
.img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
This assumes that the parent div is positioned relatively. I think this works if you want the .img relatively positioned rather than absolutely. Just remove the position: absoluteand change top/left to margin-topand margin-left.
这假设父 div 是相对定位的。如果您希望 .img 相对定位而不是绝对定位，我认为这有效。只需删除position: absolute并将顶部/左侧更改为margin-top和margin-left。
You'll probably want to add browser support with transform, -moz-transformetc.
你可能会想增加与浏览器的支持transform，-moz-transform等等。
回答by RavanH
Old question, new answer:
老问题，新答案：
When the image is larger than the wrapping div, a text-align:center or margin:auto is not going to work. But if the image is smaller, then solutions with absolute positioning or a negative left margin are going to produce weird effects.
当图像大于环绕 div 时， text-align:center 或 margin:auto 将不起作用。但是如果图像较小，那么绝对定位或负左边距的解决方案将产生奇怪的效果。
So when the image size is actually not known in advance (like on a CSM) and it might be larger or smaller than the wrapping div, there is an elegant CSS3 solution that serves all purposes:
因此，当实际上事先不知道图像大小（例如在 CSM 上）并且它可能比包装 div 更大或更小时，有一个优雅的 CSS3 解决方案可以满足所有目的：
div {
display: flex;
justify-content: center;
height: 400px; /* or other desired height */
overflow: hidden;
}
img {
flex: none; /* keep aspect ratio */
}
Note that depending on other rules in your stylesheet, you might need to append width:auto and/or max-width:none to the img.
请注意，根据样式表中的其他规则，您可能需要将 width:auto 和/或 max-width:none 附加到 img。
回答by HymanMahoney
Thanks everyone for your help. I'm going to consider this unachievable in CSS only.
感谢大家的帮助。我将认为这仅在 CSS 中是无法实现的。
I will move to a jQuery solution. Here is some [pseudo]code for those interested.
我将转向 jQuery 解决方案。这是一些感兴趣的人的[伪]代码。
I was going to give up on a CSS solution but looks like it can be done (see accepted answer). Here is the JS solution I was going to go with.
我打算放弃 CSS 解决方案，但看起来可以完成（请参阅已接受的答案）。这是我要使用的 JS 解决方案。
var $img = $('img'),
w = $img.width();
$img.css({marginLeft: -w});
And the accompanying css
以及随附的 css
img{
position:absolute;
left:50%;
}
回答by bicycle
This is always a bit tricky and there are many solutions out there. I find the best solution to be the following. This centers it both vertically and horizontally.
这总是有点棘手，有很多解决方案。我发现最好的解决方案如下。这将它垂直和水平居中。
CSS
CSS
#container {
height: 400px;
width: 400px;
}
.image {
background: white;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.left {
width: 100px;
height: 100%;
z-index: 2;
background: white;
top: 0px;
position: absolute;
left: 0px;
}
.right {
width: 100px;
height: 100%;
z-index: 2;
position: absolute;
background: white;
top: 0px;
right: 0px;
}
.image img {
margin: auto;
display: block;
}
HTML
HTML
<div id="container">
<div class="image">
<div class="left"></div>
<div class="right"></div>
<img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>
slightly different technique: Fiddle
略有不同的技术：小提琴
回答by Anything Graphic
I know this is old but I also came up with a pure css solution very similar to the above.
我知道这是旧的，但我也想出了一个与上述非常相似的纯 css 解决方案。
.parent {
float: left;
position: relative;
width: 14.529%; // Adjust to your needs
}
.parent img {
margin: auto;
max-width: none; // this was needed for my particular instance
position: absolute;
top: 11px; right: -50%; bottom: 0; left: -50%;
z-index: 0;
}
回答by Emilie
Just initialize the position of your image as follow.
只需初始化图像的位置如下。
HTML :
HTML :
<div>
<img id="img" src="/happy_cat.png"/>
</div>
CSS :
CSS :
#img {
left: 0;
right: 0;
}
Or look with a margin: auto;
或者用一个 margin: auto;
This is for horizontal align. To align it vertically too, you can do a display: table-cell;to your <div>an then vertical-align: middle;but it's not a good practice beacause your <div>is not a table.
这是用于水平对齐。要使其垂直对齐，您可以display: table-cell;对您的<div>an then执行 a 操作，vertical-align: middle;但这不是一个好习惯，因为您<div>不是一张桌子。
