Фиксированная ширина и высота изображения, но высота, которую нужно обрезать - PullRequest
Новая
       13

Фиксированная ширина и высота изображения, но высота, которую нужно обрезать

3 голосов
/ 06 марта 2012

Я только что заметил на vk.com, что изображения в вашем альбоме имеют фиксированную ширину, но высота также фиксирована, но изображения обрезаются как в середине. И если я копирую путь к изображениям и просматриваю только их, они невырезать.

Я делаю эту фотографию, чтобы ее было легче понять

enter image description here

Как это сделать?

Ответы [ 2 ]

6 голосов
/ 06 марта 2012

Их контейнеры имеют фиксированную высоту с набором overflow:hidden.

HTML: 

<ul>
<li><img src="//lorempixel.com/100/100/"></li>
<li><img src="//lorempixel.com/100/200/"></li>
<li><img src="//lorempixel.com/100/300/"></li>
<li><img src="//lorempixel.com/100/400/"></li>
</ul>​

CSS: 

li { float:left; height:100px; overflow:hidden; margin:10px; }

Демонстрация: jsfiddle.net / tbedf

2 голосов
/ 06 марта 2012

Изображения могут быть помещены в контейнер div, который имеет фиксированную высоту, а затем установить контейнер div в overflow: hidden. Это обрезает любые дочерние объекты, которые больше, чем контейнер. Обрезка выполняется только во время отображения, а сами изображения остаются неизменными.

Вы можете увидеть пример изображения, содержащего div, где вы можете переключать настройки переполнения между скрытым и видимым в этой демонстрации: http://jsfiddle.net/jfriend00/npzjn/.

...