В этой статье мы рассмотрим пять CSS-свойств, которые стоит иметь в виду при работе с изображениями.
1. object-fit: cover
Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.
Когда вы задаете значение cover, смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока. Окончательный размер контента будет определён как «покрытие» (англ. cover) блока, ограничиваясь его шириной и высотой.
Это свойство особенно полезно для фотографий профиля.
2. transform: scaleX(-1) / scaleY(-1)
При помощи transform: scaleX(-1) можно отразить изображение по горизонтали, а со значением scaleY(-1) — по вертикали.
3. object-fit: contain
Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам. Окончательный размер контента будет определен как «помещенный внутрь» (англ. contain) блока, ограничиваясь его шириной и высотой.
Это свойство полезно для создания баннеров.
4. filter: drop-shadow
Это свойство используется для создания тени у изображений без фона. Пример:
filter: drop-shadow(30px 10px 4px #3a3a3a);
- 30px — тень смещается вправо (если значение отрицательное, то влево)
- 10px — смещение вверх (при отрицательном значении — вниз)
- 4px — фактор размытия
- 3a3a3a — цет тени
5. filter: opacity
С помощью этого свойства задается уровень непрозрачности изображения. Значение указывается в процентах: 0% — полная прозрачность, 100% — исходное, непрозрачное изображение.
Перевод статьи «CSS tips on Images you need to know».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
