CODEWITHSUNDEEP
imagegrid-layoutaspect-ratio
Atheneor
Atheneor

Reputation: 51

Keep Image Ascpect Ratio

I'm currently refactoring my website and try to get rid of a few breakpoints. In my portfolio, I have an image gallery, which displays 3x3 image tiles. Those tiles are built with css grid. The tiles in my example should be 200px high and minmax (200px, 333px) width.

Currently, the tiles work as expected. But the images don't keep their aspect ratio. Is there any way to keep the original ratio and cut the images in their height? The smallest version of the container should be 200x200.

https://codepen.io/yanniksturm/pen/LYVegro

<div class="content">

  <div id="img1" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img2" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img3" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>

</div>

.content {
  min-width: 600px;
  max-width: 999px;
  margin: auto;
  width: 80%;
    backgeound-color: red;
  display: grid;
  grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
  grid-template-rows: 200px;

}

.imageWrapper {
  height: 100%;
  width: 100%;

}

img {
   height: 100%;
  width: 100%;

}

#img1 {
  grid-column: 1;
}
#img2 {
 grid-column: 2;
}

#img3 {
  grid-column: 3;
}

Thanks a lot for your help!

Upvotes: 0

Views: 132

Answers (1)

Roy
Roy

Reputation: 8069

You need to set your img width and height to auto and add a max-width: 100%; to it in order to keep the aspect ratio.

img {
  height: auto;
  width: auto;
  max-width: 100%;
}

See below snippet.

You could use object-fit: cover; but that is not supported in older browsers (I am looking at IE11). 

.content {
  min-width: 600px;
  max-width: 999px;
  margin: auto;
  width: 80%;
  backgeound-color: red;
  display: grid;
  grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
  grid-template-rows: 200px;
}

.imageWrapper {
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

img {
  height: auto;
  width: auto;
  max-width: 100%;
}

#img1 {
  grid-column: 1;
}

#img2 {
  grid-column: 2;
}

#img3 {
  grid-column: 3;
}
<div class="content">

  <div id="img1" class="imageWrapper">
    <img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img2" class="imageWrapper">
    <img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>
  <div id="img3" class="imageWrapper">
    <img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
  </div>

</div>

Upvotes: 1

Related Questions