Изображение должно занимать 100% ширины блока. Блок резиновый, до определённых моментов. Мне нужно, чтобы высота изображения была в 3,3 раза меньше, чем ширина. Как это задать в SASS?
2 ответа
Вариант с 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%;
}
<div class="container">
<div class="image">
<img src="http://lorempicsum.com/simpsons/320/100/1" alt="">
</div>
<div class="image">
<img src="http://lorempicsum.com/simpsons/320/200/1" alt="">
</div>
<div class="image">
<img src="http://lorempicsum.com/simpsons/320/50/1" alt="">
</div>
</div>
Вариант с инлайновым 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%;
}
<div class="container">
<div class="image" style="background-image: url('http://lorempicsum.com/simpsons/320/100/1');"></div>
<div class="image" style="background-image: url('http://lorempicsum.com/simpsons/320/200/1');"></div>
<div class="image" style="background-image: url('http://lorempicsum.com/simpsons/320/50/1');"></div>
</div>
-
В теге img если задаёшь высоту в процентах, то проценты эти берутся не из изображения, а из высоты блока. То есть, вы только что задали изображению высоту, равную 30% высоты родительского блока. А если она у родителя не указана, то высота вообще для изображения будет автоматически выставлена. В общем, так ничего не работает– Дмитрий4 мая 2017 в 13:10
-
Необходим как раз общий случай, потому что у изображений может быть разная высота. И бэкграундом там тоже нельзя заменить.– Дмитрий4 мая 2017 в 13:11
-
@Дмитрий, спасибо за уточнения, исправил ответ, решается двумя вариантами. 4 мая 2017 в 13:53
Можно сделать вот так:
.wrapper {
width: 100%;
}
.wrapper-inner {
position: relative;
height: 0;
border: none;
}
.ratio-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #eee;
}
.xwrapper {
padding-top: 30.30%; /* 100% ширины делим на 3.3 */
}
img{
max-height: 100%
}
<div class="wrapper">
<div class="wrapper-inner xwrapper">
<div class="ratio-content">
<img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg" alt="" />
</div>
</div>
</div>