Как скрыть часть изображения?

Мне нужно сделать это:

если изображение имеет высоту выше 100 пикселей, затем скрыть остальную часть изображения (пример: изображение с высотой 80 пикселей → показать полное изображение, изображение с высотой 150 пикселей → показать только первые 100 пикселей).

Есть ли способ сделать это с помощью CSS?

Ответ 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 был довольно плохим, и их лучше избегать.

Ответ 2

Вы можете сделать это, используя комбинацию max-height и overflow.

HTML:

<div>
    <img>
</div>

CSS

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

Также обратите внимание, что max-height не работает в старых браузерах, но если вы использовали обычный height, тогда изображения никогда не могут быть короче 100 пикселей.

Ответ 3

Поместите его в div с высотой 100 пикселей и установите overflow: hidden;