Question

我需要这样做：

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

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

Answer 1

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

e.g。

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 expressions来模拟类似的内容：

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

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

Answer 2

您可以使用max-height和overflow

的组合来完成此操作

HTML：

<div>
    <img>
</div>

CSS：

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

另请注意，max-height在旧版浏览器中不起作用，但如果您使用普通height，那么图片也不会短于100px。

Answer 3

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

Answer 4

您可以使用剪辑属性

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

如何隐藏部分图像？

4 个答案: