jquery - 在较小的 div 内垂直居中图像

Question

我有一个动态页面，加载的图像可能大于 div 或小于 div。div 的宽度为 100%，高度为 105px。

我需要图像一直填充整个 div。如果图像更大，我需要它来保持其纵横比，并且只显示图像的中心部分。我怎样才能做到这一点？

<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>

Answer 1

尝试width:inherit; height:inherit;给img标签

Answer 2

设置最外层 div 样式 CSS 如下。似乎您的外部 div 类class="info-area"。

 display: table-cell;vertical-align: middle;

Answer 3

我不知道我的例子是否对你有帮助......你可以试试我的例子

[http://jsfiddle.net/Ouali/YT85P/3/][1]