Адаптивные картинки одной высоты?

Question

[Вадим]

Тривиальная, казалось, и востребованная задача, до сих пор не имеющая универсального и простого рабочего решения: разместить адаптивные блоки изображений (в несколько колонок), чтобы картинки разных размеров выравнивались ПО ВЫСОТЕ и пропорционально масштабировались по ширине. Изначально городил для каждой картинки свой масштаб (нижняя пара на скрине). Но вариант не универсальный и геморройный, потому что всякий раз приходится руками высчитывать пропорции и width.
Затем попытался решить через флекс и грид. Но в обоих случаях все снова пляшется от width, а не от height.

Comments

[imko]

А как ты картинки разных пропорций собрался сделать одной ширины и высоты?

[Вадим]

"выравнивались ПО ВЫСОТЕ и пропорционально масштабировались по ширине". Что не ясно?

[Beliyadm]

Ну вы же понимаете, что сохранить пропорции не получится, только если через object-fit с фиксированной высотой
https://codepen.io/beliyadm/pen/XWBbdpK

[Вадим]

Beliyadm, не понимаю. И удивляюсь, почему данный функционал до сих пор не реализован без каких-либо костылей. Казалось бы, функция удобная и востребованная для реализации в блогах, портфолио и пр.
С точки зрения простой математики реализация функции элементарна, просто за исходную точку взята не ширина, а высота.
Ваш пример не подходит сразу по нескольким критериям: он жестко задает ширину и не масштабирует блок вместе с изображением.

[Beliyadm]

Вадим, Мой пример жестко задает высоту, а ширина блока идет 33% от родителя, при изменении ширины родителя картинки пропорционально по ширине и меняются. Там еще можно поиграть с object-position, я для примера сделал центрирование картинки по ширине в центре и по высоте top.

С точки зрения простой математики реализация функции элементарна,

Слабо себе это представляю, чтобы разные по пропорциям картинки одинаково вписывались в один размер блока. Вот вам две картинки - https://easycaptures.com/fs/uploaded/1756/20852753... Левая в всю ширину блока (пусть это будет 50% родителя, то есть всего 2 колонки). Как вертикальную картинку в правой колонке вписать целиком по ширине, чтобы по высоте изображение не обрезалось?
Либо же я не очень понимаю саму задачу, нужен пример

[Вадим]

Да не должно ничего обрезаться. Я же четко написал "масштабироваться". Картинкам по тз задается равная высота, исходя и которой высчитывается пропорция ширин картинок.
К примеру, одна картинка имеет пропорции х/х, вторая 2х/х. Отсюда легко определить что размер общего блока 3х/х. Все величины взаимоопределяемы. Это с тз элементарной арифметики за 4-5 класс. Но как это вписать в базовые параметры css, где все завязано на ширину, а высота высчитывается вслед? Ну ведь нет в css методики "hight: 100%; width: auto", хотя с тз математики это ровно те же арифметические действия, только в основе их выступает высота. Простейшее обратное действие.
Вы знаете такое решение?

[archelon]

Ну ведь нет в css методики "hight: 100%; width: auto"

Почему нет-то? Так можно сделать.
Если не работает, надо искать причину.

[Вадим]

archelon, приведите рабочий пример. Если бы все было так просто, сеть не пестрела бы подобными вопросами и разными вариантами костылей разной степени корявости. Но увы, варианта на сегодня лично я не нашел

[archelon]

Вот вам рабочий пример:
https://codepen.io/archelon/pen/zYLGKNQ

img {
height: 100%; 
width: auto;
}

Этот код должен работать при условии, что другие правила его не перебивают.
Но, конечно, на практике могут быть нюансы.
Самый очевидный: изображение может не помещаться в контейнер по ширине.
И вот тут уже нужны либо костыли либо альтернативный подход.
Например:
img {object-fit: contain;}
Это свойство придумали специально для подобных целей. Это не костыль.

[Вадим]

archelon, попробую завтра. Но конструкция кажется нежизнеспособной к исходной задаче

[Вадим]

archelon, вроде вышла конструкция. Надо еще покрутить в разных местах и вьюпортах.
У меня получилось так (попробовал в флекс-блоках):

.pic-vh {
width: auto; 
height: max-content; 
object-fit: cover; /* в данном случае без разницы contain или cover */
max-height: calc(41vw - var(--36px) - 14px)} /* подгонял под свои размеры, поля и отступы */

(нижняя пара - исходный вариант с вручную подобранным масштабом, верхняя - условно универсальный вариант с object-fit)