Question

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

HTML：

<div>
    <img>
</div>

CSS：

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

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

img{
    border:solid 5px #555555;
}

但如果图片的高度高于100px，则不会显示底部边框。我该如何解决？

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时，图片底部和外部容器之间会有一个小间隙。

demo

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

-

显示：内联块，边框添加到div，因此边框将包裹围绕图像
margin-bottom 已添加到img，因此隐藏了额外的差距

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

2 个答案: