css - 如何隐藏部分图像？

Question

我需要这样做：

如果图像的高度高于 100 像素，则隐藏图像的其余部分（例如：高度为 80 像素的图像 -> 显示完整图像，高度为 150 像素的图像 -> 仅显示前 100 像素）。

有没有办法用 CSS 做到这一点？

score 33 · Accepted Answer

您可以使用该max-height属性来指定图像的最大高度，然后用于overflow: hidden;隐藏其他任何内容。

例如

HTML：

<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS：

.image-container {
  max-height:100px;
  overflow:hidden;
}

JSFiddle 示例：http: //jsfiddle.net/3jA9q/

编辑

对于 internet explorer 6，您可以使用CSS 表达式来模拟类似的东西：

.image-container {
  height:expression(this.scrollHeight<100?"auto":"100px");
  overflow:hidden;
}

但是请注意，这需要用户在其浏览器中启用 JavaScript。然而，我对 CSS 表达式的体验一直很差，最好避免使用它们。

score 8 · Accepted Answer

您可以使用max-height和的组合来做到这一点overflow。

HTML：

<div>
    <img>
</div>

CSS：

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

另请注意，max-height这在较旧的浏览器中不起作用，但如果您使用正常，height则图像也永远不会短于 100 像素。

score 4 · Accepted Answer

4

把它放在一个高度为 100px 的 div 中并设置overflow: hidden;

于 2012-06-18T22:45:25.993 回答

score 2 · Accepted Answer

2

您可以使用剪辑属性

img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}

于 2020-07-02T18:06:31.443 回答

4 回答 4