Изображение должно занимать 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
Комментариев нет:
Отправить комментарий