| Kosten | Четверг, 12 Июля 2018, 05:47 | Сообщение 1 |
| У вас возникли проблемы с созданием галереи, в которой изображения имеют разные размеры. Иногда бывает, что в галерее есть изображения совершенно разных разрешений, некоторые вертикальные, другие горизонтальные.
Мы можем прибегнуть к редактированию изображений, но это приводит к его потере. Мы могли бы также указать конкретную ширину и высоту изображения из css с шириной и высотой, но это искажает изображение.
Решением для этого является использование свойства Object Fit. Это свойство сохраняет нас в такой ситуации, потому что позволяет нам определить, как будет вести себя поведение элемента.
Значения для этого свойства:
- Object-fit: fill: содержимое заполняет весь элемент. В соответствии с его размерами. Это приводит к искажению изображения и потере изображения.
- Object-fit: содержать: изображение подходит как можно лучше в контейнере, аспект изображения здесь не пропадает, но размеры контейнера не оцениваются.
- Object-fit: cover: один из лучших вариантов, очень похожий на свойство фона. Содержимое заполняется всем элементом, и изображение не теряет своего внешнего вида, однако обрезка изображения создается, поскольку показана только его часть. В случае миниатюр галереи эта опция будет подходящей, так как щелчок откроет модальный, и если изображение будет показано полностью.
- Object-fit: scale-down: контент ведет себя так, как если бы не были указаны ни один или контейнер, что бы отображало меньший размер.
- Object-fit: none: содержимое не изменяется.
И не беспокойтесь о совместимости, это свойство имеет хорошую поддержку в большинстве браузеров, кто его не поддерживает, - Internet Explorer.
| | Страна: (RU) |
| |
