Hard to show square image with unknown dimensions in a responsive grid with thumbnails-CodePudding

I would like to create a responsive image grid 3*N

I could resize the image into thumbnails and shrink to 1 thumbnail per row when seeing as mobile.

Just got a couple of issues:

Hard to go center and crop image to 300px X 300 px with unknown vertical image size like vertical images and horizontal images
when my browser screen shrinks to 600px - 900px, my image row does not change from 3 thumbnails per row into 2 thumbnails per row

Would you please provide me guidelines the layout to show pictures in square thumbnail and responsive grids?

Below is my work on codepen with my css coding. You could fork my work and proceed

Please feel free to comment if any

https://codepen.io/burkaslarry/pen/abjovGz

body {
  width: 80%;
  margin: 30px auto;
  font-family: sans-serif;
}

h3 {
  text-align: center;
  font-size: 1.65em;
  margin: 0 0 30px;
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* or space-around */
}

a {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  text-decoration: none;
  color: black;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }
}

a:hover img {
  transform: scale(1.15);
}

figure {
  margin: 0;
  overflow: hidden;
}

img {
  border: none;
  width: 300px;
  height: 300px;
  object-fit: cover;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.p a {
  display: inline;
  font-size: 13px;
  margin: 0;
  text-decoration: underline;
  color: blue;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 100px;
}

<div>
  <a href="https://i.imgur.com/uBlbQr5.png">
    <figure>
      <img src="https://i.imgur.com/uBlbQr5.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/5OBlxo1.png">
    <figure>
      <img src="https://i.imgur.com/5OBlxo1.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/HM3UavW.png">
    <figure>
      <img src="https://i.imgur.com/HM3UavW.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/XRabiFI.png">
    <figure>
      <img src="https://i.imgur.com/XRabiFI.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/Np615iB.png">
    <figure>
      <img src="https://i.imgur.com/Np615iB.png" alt="">
    </figure>
  </a>


</div>

<p >Demo by Larry Lo. <a href="http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/" target="_blank">See article</a>.</p>

CodePudding user response：

There is a override in css styles, so you need to set the image width in only one site, then you flex will work https://codepen.io/elvengador/pen/abjbPjm

There is other posible solutions:

if you want to show all height and width in boxes you need to show the images as background with this properties:

background-size: contain;
background-repeat: no-repeat;
background-position: center;

if you want show all height and width without lose any space you can display in masonry view like this: https://mui.com/material-ui/react-masonry/

CodePudding user response：

In your code <figure> is a direct descendant of a Flexbox parent, but it is not allowed to grow and cannot fill the full row height.
<figure> must be forced to form a square.
<img> inside <figure> must be able to grow horizontally and vertically to fill parent <figure>.
Breakpoint for showing 2 versus 4 images should be 900 / 16 = 56.25 instead of 50
Change breakpoint definitions to reflect OP image requirements:
- Size 100% and 1 image, up to 600px (default). I guessed this was needed because of the specific 600px-900px breakpoint requirement. As in: what when a device is smaller than 600px?
- Size 50% and 2 images from 600px (37.5em) and up (media query)
- Size 25% and 4 images from 900px (56.25em) and up (media query)

Snippet with comments:

body {
  width: 80%;
  margin: 30px auto;
  font-family: sans-serif;
}

h3 {
  text-align: center;
  font-size: 1.65em;
  margin: 0 0 30px;
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* or space-around */
}

a {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(100% - 4px); /* MOD from 50% */
  text-decoration: none;
  color: black;
}

/* ADD to break at 600px */
@media screen and (min-width: 37.5em) {
  a {
    width: calc(50% - 4px);
  }
}

/* MOD from 50em to break at 900px */
@media screen and (min-width: 56.25em) {
  a {
    width: calc(25% - 6px);
  }
}

a:hover img {
  transform: scale(1.15);
}

figure {
  /* ADD */
  flex: 1;             /* Stretch to fill width */
  height: 100%;        /* dito height */
  aspect-ratio: 1 / 1; /* force to be a square */
  /**/

  margin: 0;
  overflow: hidden;
}

img {
  border: none;
  width: 100%;         /* MOD: from 300px */
  height: 100%;        /* dito, stretch to fill */
  object-fit: cover;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.p a {
  display: inline;
  font-size: 13px;
  margin: 0;
  text-decoration: underline;
  color: blue;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 100px;
}

<div>
  <a href="https://i.imgur.com/uBlbQr5.png">
    <figure>
      <img src="https://i.imgur.com/uBlbQr5.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/5OBlxo1.png">
    <figure>
      <img src="https://i.imgur.com/5OBlxo1.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/HM3UavW.png">
    <figure>
      <img src="https://i.imgur.com/HM3UavW.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/XRabiFI.png">
    <figure>
      <img src="https://i.imgur.com/XRabiFI.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/Np615iB.png">
    <figure>
      <img src="https://i.imgur.com/Np615iB.png" alt="">
    </figure>
  </a>


</div>

<p >Demo by Larry Lo. <a href="http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/" target="_blank">See article</a>.</p>