Элемент img для заполнения ширины контейнера, если максимальная высота не достигнута с использованием чистого CSS
Я пытаюсь использовать CSS для установки размера изображения. Я хочу, чтобы изображение заполнило ширину контейнера, поэтому width: 100% сделает это (даже если исходная ширина img меньше).
Однако источник может содержать как портретные, так и альбомные изображения. В случае длинных портретов вместо заполнения ширины я хотел бы центрировать изображение внутри контейнера с учетом максимальной высоты.
Я пробовал очевидное:
width: 100%;
max-height: 250px;
Но, очевидно, это увеличивает ширину, и изображение искажается. Если я установлю максимальную ширину вместо ширины, изображения меньшего размера, чем контейнер, не будут заполнять пространство, даже если максимальная высота не будет достигнута.
Есть ли способ в чистом css указать изображению заполнить контейнер, если не будет достигнута некоторая высота?
^ или вместо этого считайте изображение фоном
возможно установка height: 250px; и width:auto; или, max-height:250px;background-size: cover;width: auto;
Я бы попробовал css-tricks.com/on-object-fit-and-object-position