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

【问题标题】：How to make image align with container's bottom even its height is greater than container's?即使容器的高度大于容器的高度，如何使图像与容器的底部对齐？
【发布时间】：2014-09-19 03:19:58
【问题描述】：

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

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

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

【问题讨论】：

标签： css

【解决方案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

【讨论】：

我问的不是绝对位置，还有其他方法吗？
你想要这样 *{margin:0; padding:0;} .container{height:120px;边框：1px 实心 #333;边距：10px；显示：表格单元格； vertical-align:bottom;} .img_path{vertical-align:bottom} 检查这个小提琴jsfiddle.net/Karthik_Dev/9ysfvu32
没有。在您的小提琴中，尝试制作 50x250 的图像之一，您将看到容器已被扩展以包含放大的图像。我想要的是当图像（高度）大于容器时，超出的部分应该被隐藏，并且图片的这个超出部分必须是上部，因为图片的底部与容器的底部对齐。
嘿，这不是问题。我只是按照你的要求做的。只需删除高度并检查相同。检查此链接jsfiddle.net/Karthik_Dev/9ysfvu32
很抱歉，但在我看来，您的小提琴似乎没有按我的预期工作。 50x250 的图像迫使容器比它应该的更大（尝试为容器设置一个小于 250 的高度或最大高度值，您将看到该值被忽略）