如何隐藏部分图像？

Question

我需要这样做:

如果图像的高度高于100px,则隐藏图像的其余部分(例如:高度为80px的图像 - >显示完整图像,高度为150px的图像 - >仅显示前100px).

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

Answer 1

您可以使用该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表达式的体验非常差,并且最好避免使用它们.

Answer 2

您可以使用的combnation它做max-height和overflow.

HTML:

<div>
    <img>
</div>

CSS:

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

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