#html #css
#HTML #css
Вопрос:
У меня возникла проблема с соотношением сторон изображения. Это стало похоже на это изображение:
Но когда я настраиваю размер изображения, оно становится таким:
Как с этим справиться?
.itemBox {
height: 195px;
margin: 15px;
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
background-color: #e4b972;
}
.item_img {
width: 120px;
height: 195px;
}
<div class="itemBox">
<div style="float:left;">
<img class="item_img" src="https://thumbs.dreamstime.com/z/no-image-available-icon-flat-vector-no-image-available-icon-flat-vector-illustration-132482953.jpg" />
</div>
</div>
Комментарии:
1. Установить
width: auto; height: 100%;
?2. вы должны использовать ширину: 100%; высота: авто;
3. это все равно, когда я использую
width: auto;
илиwidth: 100%
4.
width: auto;
иheight: 195px;
решает проблему.
Ответ №1:
установите размер и ширину в div и разместите свое изображение в div
.itemBox {
height: 195px;
margin: 15px;
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
background-color: #e4b972;
}
.div-for-img {
width: 120px;
height: 195px;
float: left;
}
.item_img {
height: 100%;
object-fit: contain;
}
<div class="itemBox">
<div class="div-for-img">
<img class="item_img" src="https://thumbs.dreamstime.com/z/no-image-available-icon-flat-vector-no-image-available-icon-flat-vector-illustration-132482953.jpg" />
</div>
</div>