CODEWITHSUNDEEP
cssimagegridmobile-safari
uzikim
uzikim

Reputation: 27

Image stretched in mobil view using css grid

I used css grid to place an image and on desktop it look right but on mobil it is vertically stretched. I have set another image with the same sizes which shows correctly. Everything is set the same.Please find below css code for both images. I have problems with the image name cic-img. The voc-img is showing correctly.

.voc {
   display:grid;
   grid-template-columns: repeat(4, 25%);
   grid-template-rows: max-content(30%) auto max-content(33%);
   grid-gap: 10px;
   margin: 9rem auto;
   padding: 0 4rem;
   width: 850px;
   text-align: center;
   overflow:hidden;
}

.voc-img {
   grid-column: 2 / 4;
   grid-row: 1/ 4; 
   width: 100%;
   max-height: 100%;
}

.cic {
   display: grid;
   grid-template-columns: repeat(4, 25%);
   grid-template-rows: max-content(30%) auto max-content(33%);
   grid-gap: 10px;
   margin: 9rem auto;
   padding: 0 4rem;
   width: 850px;
   text-align: center;
   overflow: hidden; 
}

.cic-img {
   grid-column: 2 / 4;
   grid-row: 1/ 4; 
   height: 100%;
   width:100%;
}

Upvotes: 1

Views: 242

Answers (1)

Anis R.
Anis R.

Reputation: 6902

In your CSS, I can see that your .cic-img and .voc-img do not have identical height properties (max-height: 100% vs height: 100%). This most likely explains why the two images are not rendering in the same way.

Consider replacing .cic-img's height: 100% by max-height: 100%, so that its height is not forced to be exactly 100%.

And as a side note, instead of playing around with widths and heights, the object-fit CSS property should be helpful.

Upvotes: 1

Related Questions