Object-fit: обложка; альтернатива?

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

Я нашел

object-fit: cover;

который бы соответствовал моим потребностям, но очень быстро обнаружил, что поддержка для этого крайне ограничена (в основном, только опера). Есть ли что-нибудь еще для этого?

Большое спасибо заранее:)

Ответ 1

Если вы можете добавить это изображение на страницу в качестве фона, вы можете использовать:

background-size: cover;

Это свойство также может принимать значение contain. Поэкспериментируйте немного, и вы увидите разницу.

cover заставляет изображение заполнить весь контейнер. Это означает, что изображение будет обрезано, если его отношение не соответствует коэффициенту контейнера.
contain заставляет изображение соответствовать в контейнере. Это означает, что изображение никогда не выйдет за пределы контейнера. Если коэффициенты (изображение и контейнер) различны, на сторонах изображения будут лежать пробелы (слева и справа, сверху или снизу).

Значения

cover и contain поддерживаются соответствующим образом:

Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1

Ответ 2

У меня была похожая проблема. Я решил это только с помощью CSS.

По сути, Object-fit: cover не работала в IE, она занимала 100% ширины и 100% высоты, а соотношение сторон было искажено. Другими словами, эффекта увеличения масштаба изображения не было, что я видел в Chrome.

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только это в центре, я даю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.