CODEWITHSUNDEEP
htmlcss
Mali
Mali

Reputation: 33

How to handle image aspect ratio in mobile

I got problem to handle image ratio. It become like this image:

image1

But when I adjust image size it become like this:

image2

How to handle it?

.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>

Upvotes: 0

Views: 527

Answers (1)

Stacks Queue
Stacks Queue

Reputation: 1142

set the size and width in the div and contain your image in the 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>

Upvotes: 2

Related Questions