• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Использование свойства object-fit с помощью CSS (Свойство object-fit масштабирует, обрезает или растягивает)
Использование свойства object-fit с помощью CSS
Kosten
Дата: Четверг, 12.07.2018, 05:47 | Сообщение 1
Администраторы
Сообщений:18092
Награды: 55


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

Мы можем прибегнуть к редактированию изображений, но это приводит к его потере. Мы могли бы также указать конкретную ширину и высоту изображения из css с шириной и высотой, но это искажает изображение.

Решением для этого является использование свойства Object Fit. Это свойство сохраняет нас в такой ситуации, потому что позволяет нам определить, как будет вести себя поведение элемента.



Значения для этого свойства:

- Object-fit: fill: содержимое заполняет весь элемент. В соответствии с его размерами. Это приводит к искажению изображения и потере изображения.

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

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

- Object-fit: scale-down: контент ведет себя так, как если бы не были указаны ни один или контейнер, что бы отображало меньший размер.

- Object-fit: none: содержимое не изменяется.

И не беспокойтесь о совместимости, это свойство имеет хорошую поддержку в большинстве браузеров, кто его не поддерживает, - Internet Explorer.
Прикрепления: 5569191.png(59.8 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Использование свойства object-fit с помощью CSS (Свойство object-fit масштабирует, обрезает или растягивает)
  • Страница 1 из 1
  • 1
Поиск: