Страницы

Поиск по вопросам

среда, 22 мая 2019 г.

SASS, задать высоту изображению, исходя из его ширины

Изображение должно занимать 100% ширины блока. Блок резиновый, до определённых моментов. Мне нужно, чтобы высота изображения была в 3,3 раза меньше, чем ширина. Как это задать в SASS?


Ответ

Вариант с img {position: absolute;}
.container { max-width: 400px; width: 100%; } .image { height: 0; padding-bottom: 30%; position: relative; width: 100%; } img { display: block; height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }


Или смотреть на jsfiddle
Вариант с инлайновым background-image
.container { max-width: 400px; width: 100%; } .image { background-position: 50% 50%; background-size: cover; height: 0; padding-bottom: 30%; position: relative; width: 100%; }

Или смотреть на jsfiddle

Комментариев нет:

Отправить комментарий