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

Question

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

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

我真实项目中图像的高度未知，因此我无法使用margin / translate等来重新定位图像。绝对位置绝对是其中一种方式，以及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