Сохранять пропорции изображения при размещении в размерах без контейнера или пробелов

Question

Возможно ли иметь изображение произвольных размеров, вписывающееся в заданную ширину и высоту, но без использования фиксированного контейнера?

Очевидно, что достаточно просто создать контейнер с указанными c размерами и иметь однако, это может соответствовать дополнительному пробелу в контейнере вдоль размера, где форматное соотношение изображения короче или выше, чем у контейнера.

Можно ли сказать, что изображение:

• должно быть максимально большим
• сохранять соотношение сторон
• никогда не превышать ширину a
• никогда не превышать высоту b
• не содержать пробелов

Для ясности, это должно включать только CSS и не знать размеров изображений во время выполнения.

Answer 1

Этого можно добиться с помощью свойства CSS object-fit: cover;.

, которое сообщит изображению, что оно сохраняет соотношение сторон, никогда не превышает ширину и высоту контейнеров и не имеет пустого пространства, но в порядке чтобы сохранить пропорции и по-прежнему помещаться в контейнер без пробелов, он обрезает края изображения.

Answer 2

img{
  object-fit: cover;
}

вы можете узнать больше о подгонке объекта здесь