css - 如何隐藏部分图像？

Question

我需要这样做:

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

有没有办法用 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 expressions模拟类似的东西:

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

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