css - 如何为部分隐藏的图像添加边框？

Question

这是我的代码（如果图像的高度高于 100 像素，则仅显示图像的前 100 像素并隐藏其余部分）：

HTML：

<div>
    <img>
</div>

CSS：

div{
    max-height:100px;
    overflow:hidden;
}

现在，我需要添加一个 5px 的边框：

img{
    border:solid 5px #555555;
}

但如果图像的高度高于 100 像素，则不会出现底部边框。我该如何解决？

Answer 1

那是因为 div 的溢出是隐藏的。相反，您应该在 div 上设置边框。这样，div 只会占据图像的高度，但在 100px 之后，它将保留边框，但图像不会显示超过该高度。不过，您需要调整 div 的宽度以适合图像。

<span><img src="" /></span>

span{
    max-height:100px;
    border:solid 5px #555;
    overflow: hidden;
    display: inline-block
}

img {
    width: 200px; /* image width */
    height: 200px; /* image height */
}

与您一起使用跨度display: inline-block不再需要设置外部容器的宽度。

问题：当图像尺寸小于 时100px，图像底部和外部容器之间有一个小间隙。

演示

Answer 2

如果这是您需要的，请查看：

• （第一次尝试）http://jsfiddle.net/Vn4PM/
• （最后一次尝试）http://jsfiddle.net/Vn4PM/11/

HTML（带有示例图形）：

<div>
    <img src="http://www.dummyimage.com/100x150/ffff00/fff" />
</div>​
<div>
    <img src="http://www.dummyimage.com/100x50/ffff00/fff" />
</div>​

CSS：

div {
    max-height: 100px;
    border: solid 5px #555555;
    overflow: hidden;
    display: inline-block;
}

img { margin-bottom: -5px; }​

--

• display: inline-block和边框添加到 div 所以边框将环绕图像
• 边距底部添加到 img，因此隐藏了额外的间隙