CSS: усечение ряда изображений до одинаковой высоты

Question

У меня есть набор миниатюр изображений, которые я показываю на веб-странице. Все изображения имеют ширину 256 пикселей, и я уменьшаю их на 50% с помощью <img width="128px" ...>

Большинство изображений имеют соотношение 4х3, поэтому они довольно хорошо отображаются в несколько рядов.

Однако некоторые изображения очень высокие (например, 256x1200). Я хотел бы указать максимальную высоту для этих изображений, но изображение должно быть обрезано (т. Е. Показано только верхняя часть изображения) и не масштабировано (что нежелательно сжимает изображение).

Я пытался указать CSS img { max-height="128" }, но, конечно, это дает мне нежелательное масштабирование.

Итак: как указать максимальную высоту, при которой изображение будет обрезано, а не масштабировано?

обновление: спасибо всем, я добавил пример ниже.

Answer 1

Оберните их в классифицированный div, установите высоту div на 128, а затем установите overflow: hidden для этого класса.

Answer 2

Оберните изображение в div, установите высоту и ширину div в соответствии с вашими потребностями. Добавить стиль переполнения: скрыто в div.

Answer 3

Если мы показываем ряд изображений, ширина которых является плавной (например, четыре столбца изображений, каждый из которых имеет ширину 25%), и мы хотим, чтобы их высота масштабировалась при изменении ширины, одним из способов было бы использовать ряд div с background-image: url (...) вместо <img> тэгов.

Это позволяет нам установить padding-bottom для div, который даст им высоту в процентах от ширины их контейнера. Например, если мы хотим получить идеальные квадратные изображения, мы должны установить их width% и padding-bottom% одинаковыми. Вы можете настроить, чтобы сохранить любое соотношение сторон изображения.

.image-container {
width: 33.33333333%;
padding-bottom: 33.33333333%;
margin: 0;
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

См. https://jsfiddle.net/qxn87wmo/20/

Тогда нужно просто установить размер фона, положение фона по желанию.

Answer 4

Спасибо всем, кто откликнулся ... вот пример решения.

<div style="max-height: 170px; overflow: hidden;">
    <img width="128" align="top" src="img1.jpg">
    <img width="128" align="top" src="img2.jpg">
    <img width="128" align="top" src="img3.jpg">
</div>

Каждое из изображений высотой более 170 пикселей усекается, и изображения выравниваются по верху Для краткости я поместил информацию о стиле в строку. В моем реальном коде это в разделе стилей.