[英]Center a large image of unknown size inside a smaller div with overflow hidden
I would like to center an img inside a div without javascript and without background-images . 我想在没有javascript且没有background-images的div中将img居中。
Here is some example code 这是一些示例代码
<div>
<img src="/happy_cat.png"/>
</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! 谢谢!
Jack 插口
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. 这假定父div相对放置。 I think this works if you want the .img relatively positioned rather than absolutely.
我认为,如果您希望.img相对定位而不是绝对定位,则此方法有效。 Just remove the
position: absolute
and change top/left to margin-top
and margin-left
. 只需删除
position: absolute
然后将top / left更改为margin-top
和margin-left
。
You'll probably want to add browser support with transform
, -moz-transform
etc. 您可能需要添加带有
transform
, -moz-transform
等的浏览器支持。
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. 当图像大于包装的div时,text-align:center或margin:auto将不起作用。 But if the image is smaller, then solutions with absolute positioning or a negative left margin are going to produce weird effects.
但是,如果图像较小,则具有绝对定位或负边距的解决方案将产生怪异的效果。
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. 请注意,根据样式表中的其他规则,您可能需要在img上附加width:auto和/或max-width:none。
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>
Thanks everyone for your help. 感谢大家的帮助。
I'm going to consider this unachievable in CSS only.
我将认为仅在CSS中这是无法实现的。
I will move to a jQuery solution.
我将转向jQuery解决方案。
Here is some [pseudo]code for those interested.
这是一些有兴趣的伪代码。
I was going to give up on a CSS solution but looks like it can be done (see accepted answer). 我本来打算放弃CSS解决方案,但看起来可以做到(请参见已接受的答案)。 Here is the JS solution I was going to go with.
这是我要使用的JS解决方案。
var $img = $('img'),
w = $img.width();
$img.css({marginLeft: -w});
And the accompanying css 和随附的CSS
img{
position:absolute;
left:50%;
}
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;
}
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;
看margin: auto;
This is for horizontal align. 这是用于水平对齐。 To align it vertically too, you can do a
display: table-cell;
要使其也垂直对齐,可以
display: table-cell;
to your <div>
an then vertical-align: middle;
到您的
<div>
,然后vertical-align: middle;
but it's not a good practice beacause your <div>
is not a table. 但这不是一个好习惯,因为您的
<div>
不是表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.