css - 即使图像的高度大于容器的高度，如何使图像与容器的底部对齐？

Question

<div style="max-height:80px;overflow:hidden"><img src="http://placehold.it/100x100"></div>

上图下方的 20px 将被隐藏，也就是图像与容器的顶部对齐。我希望图像与容器底部对齐，因此上方的 20px 将被隐藏，而不是下方的 20px。

我的真实元素中的图片高度未知，所以我不能使用边距/平移等来重新定位图片。绝对位置肯定是其中一种方式，jQuery也是，不知道还有没有其他方式，比如vertical-align。

Answer 1

温，

你必须使用相对和绝对路径。

HTML

<div class="container">
    <img src="http://placehold.it/100x100" alt="img" class="img_path" />
</div>

CSS

.container{position:relative; width:80px; height:80px; max-width:80px; max-height:80px; overflow:hidden; border:1px solid #ddd;}
.img_path{position:absolute; bottom:0; left:0;}

更多信息 JSFiddle