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

【问题标题】：How to add a border to an image hidden in part?如何为部分隐藏的图像添加边框？
【发布时间】：2012-06-21 16:45:44
【问题描述】：

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

HTML：

<div>
    <img>
</div>

CSS：

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

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

img{
    border:solid 5px #555555;
}

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

【问题讨论】：

标签： css

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

【讨论】：

是的，你是对的。 @xRobot 应该设置div 的边框而不是img，因为它是剪辑/隐藏，并且当您强制底部边框在第一名。
然后使用height 而不是max-height
@xRobot，你为什么批评答案使用max-height，而这只是你的问题？
@DexterHuinda 这就是为什么我指出“不过，您需要调整 div 的宽度以适合图像。”
上述答案不会达到目的，因为 img 的尺寸可能会有所不同，例如宽度

【解决方案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，并且 border 添加到 div 以便边框将环绕图像周围
margin-bottom 添加到 img 以隐藏额外的间隙

【讨论】：

在这种情况下，如果图像的高度为 50px，那么它会显示 2 个底部边框。
哦，对了，所以你真的需要设置div的边框，而不是img。
在最后一种情况下，如果图像的高度为 50px，那么它会显示一个间隙：D (jsfiddle.net/Vn4PM/8)
@sachleen 对，这意味着这个问题没有完美的解决方案。顺便说一句，这是 alpha 版本 0.000.001，所以预计会有很多错误，哈哈。