0

Given a set of different images with different ratios but all having a side (either height or width) of 400px, I wish I could control how much elements per row could be seen, or, said differently, control the moment when the browser would rather shrink elements, rather than keeping growing them.

Constraints:

  1. The image shown are totally random images, not knowing in advance their size/ratio.
  2. There should be no visible space between images.
  3. Solution should preferably be in CSS and portable.
  4. The images must be displayed in order, from left to right, columns (column-count: x) don't make this possible (AFAIK).

My markup is the following:

#images {
  flex-flow: row wrap;
  display: flex;
}

#images a {
  flex: auto;
}

#images img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  max-width: 100%;
}
<!DOCTYPE html>
<html>

<body>
  <h1>Gallery of different sized images</h1>
  <section id="images">
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/315" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/156" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/305" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/331/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/291/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/244" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/295/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/203" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/255/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/304/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/321" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/375/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/249/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/272/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/199" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/211" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/295/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/329" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/287" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/237" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/214/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/263/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/373" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/388/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/312" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/282/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/300" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/180/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/165/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/350" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/380/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/301" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/281/400" alt="kitty"></a>
  </section>
</body>

</html>

Rendering is currently great for small width: ~300px width window:

Rendering with about 300px width window

When the size is bigger, e.g. ~800px width, the first image is enlarged a lot, almost 2x:

Rendering with about 800px width window

The browser only starts putting 2 elements on a same row when reaching ~840px width:

Rendering with about 840px width window

I wish to trigger this flex-rearrangement sooner so that images gets enlarged as less as possible (I even wish I could use flex: 0 1 auto to only allow shrinking and no growing).

The only solution I found so far, but looks hacky and do not work on Firefox, is to change the zoom factor, setting for example: zoom: 0.7 on #images. This gives a desired result:

[Rendering with about 800px width window], with zoom on 0.7[4]

Any clean and portable CSS solution that exists?

Patrick Allaert
  • 1,751
  • 18
  • 44
  • Have you tried Media queries ? this is the perfect, set a max width on the mages and change it on different screen sizes – Rainbow Dec 08 '19 at 21:29
  • @ZohirSalak: Yes, tried the `zoom` property inside media queries, works, but not for Firefox I'm looking for a compatible solution. Setting max-width: that doesn't work wel, it will not be a flexible layout anymore, but a column-like, where every pictures have the same size, result is not nice, see: https://jsfiddle.net/f4wtxcs8/ – Patrick Allaert Dec 08 '19 at 21:39

1 Answers1

0

I found a CSS, portable way of doing it by simulating zoom with properties width, height and transform: scale().

Works, but still looks like a hacky solution, it comes down to do something like:

#images {
  /* Simulating 2x zoom */
  width: 200% !important;
  height: 200% !important;
  transform: scale(0.5); /* 0.5 = 100 / 200 */
}

Full, working, solution in the snippet (look at the @media queries) below.

Criticisms welcome!

#images {
  flex-flow: row wrap;
  display: flex;
  /******** Start of solution: common part for #images container ********/
  /*
    In media queries, we use "transform: scale" for simulating zoom,
    in all cases it must be done from origin "0 0"
  */
  transform-origin: 0 0;

  /*
    The zoom simulation generates blank content: the original size is kept.
    Using float + negative margin will remove those 'margins'
  */
  float: left;
  margin-bottom: -9999999px;
  margin-right: -9999999px;
  /******** End of solution: common part for #images container ********/
}

#images a {
  flex: auto;
}

#images img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  max-width: 100%;
}

/******** Start of solution: @media parts for #images container ********/
@media screen and (min-width: 200px) {
  #images {
    /* Simulating 2x zoom */
    width: 200% !important;
    height: 200% !important;
    transform: scale(0.5); /* 0.5 = 100 / 200 */
  }
}
@media screen and (min-width: 400px) {
  #images {
    width: 175% !important;
    height: 175% !important;
    transform: scale(0.571429); /* 0.571429 = 100 / 175 */
  }
}
@media screen and (min-width: 800px) {
  #images {
    width: 150% !important;
    height: 150% !important;
    transform: scale(0.6666667); /* 0.6666667 = 100 / 175 */
  }
}
@media screen and (min-width: 1200px) {
  #images {
    width: 125% !important;
    height: 125% !important;
    transform: scale(0.8); /* 0.8 = 100 / 125 */
  }
}
/******** End of solution: @media parts for #images container ********/
<!DOCTYPE html>
<html>

<body>
  <h1>Gallery of different sized images</h1>
  <section id="images">
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/315" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/156" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/305" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/331/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/291/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/244" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/295/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/203" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/255/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/304/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/321" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/375/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/249/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/272/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/199" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/211" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/295/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/329" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/287" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/237" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/214/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/263/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/373" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/388/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/312" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/282/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/300" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/180/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/165/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/350" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/380/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/301" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/281/400" alt="kitty"></a>
  </section>
</body>

</html>
Patrick Allaert
  • 1,751
  • 18
  • 44