[英]center image vertically inside a smaller div
I have a dynamic page, the image loaded could be larger than the div or smaller than the div. 我有一个动态页面,加载的图像可能大于div或小于div。 The div is 100% width and 105px height.
div的宽度为100%,高度为105px。
I need the image to fill the entire div all the time. 我需要图像始终填充整个div。 If the image is bigger i need it to keep its aspect ratio and just the center part of the image be shown.
如果图像更大,我需要它保持其长宽比,并且仅显示图像的中心部分。 How can i do this?
我怎样才能做到这一点?
<div class="image-container info-container-area " style="">
<div class="info-area">
<div class="image-wrapper" style="height: 105px;">
<img src="image.jpg" >
</div>
</div>
</div>
Try giving width:inherit; height:inherit;
尝试给出
width:inherit; height:inherit;
width:inherit; height:inherit;
for img
tag 对于
img
标签
Set Most Outer Div Style CSS as below. 如下设置“最外层Div样式CSS”。 Seems your outer div class
class="info-area"
. 似乎您的外部div类
class="info-area"
。
display: table-cell;vertical-align: middle;
I do not know if my example it helps you... you can try my example 我不知道我的例子是否对您有帮助...您可以尝试我的例子
[http://jsfiddle.net/Ouali/YT85P/3/][1] [http://jsfiddle.net/Ouali/YT85P/3/][1]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.