0

I want to make a grid with alot of images. The grid shall contain many rows, and each row shall contain 5 images. The height and width of every image is identical (square). Below is my code so far.

<div class="row row-cols-5" style="padding: 0 12px 0 12px">
  <div class="col p-0"><img src="img0.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img1.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img2.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img3.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img4.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img5.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img6.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img7.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img8.jpg" class="img-fluid" /></div>
  <div class="col p-0"><img src="img9.jpg" class="img-fluid" /></div>
</div>

To make the images fit perfect on all screens, I need the col height and width to allways be identical. That means, on some screens the col width and height is for example 100px. On other screens the col height and width is for example 150px. In other words, I need the col height to allways be identical as the col width (which varies).

How can this be solved?

Øyvind Isaksen
  • 97
  • 1
  • 8
  • 1
    I think this is answered here https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Yichaoz Oct 05 '21 at 14:57

0 Answers0