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/
Эта логика работает во всех браузерах.
