CODEWITHSUNDEEP
htmlcssflexbox
user2023630
user2023630

Reputation: 59

Creating a resizable and scalable image grid using flexbox

I am trying to make a resizable/scalable image grid using FlexBox.

The problem is that whenever the image's proportions are too thin due to resizing the window, the FlexBox will place additional images on previous rows to fill out the space.

It looks good under some window proportions. But, if the window is too short in height and too long in width, then images from lower rows will move to upper rows.

I have tried using flexboxes and tables. When using FlexBox, I have also tried to set the width of flex items using the flex property for images. The issue with this is that images will stretch and distort in order to fill up the required space.

Here is code that I am working with:

html, body { 
  height: 100%;
  width: 100%;
  margin: 0;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-color: blue;
  height: 100%;
}

#flex-container>img {
  width: auto;
  height: auto;
  max-width: 25%;
  max-height: 50%;
  margin: auto;
}
<div id="flex-container">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">

  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>

I want to make the images stay on the same row and column, only resizing themselves in accordance to how large the page is.

I don't need to use FlexBox, but it seems to be the best way to accomplish this task.

Upvotes: 2

Views: 572

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Flexbox is a good choice for this layout but there are some tricky side effects when images are the flex items. In order to make this more straightforward, I find it very helpful to put the images inside wrapper divs.

Control the number of items per row now with the width, you can use media queries to change the width as the screen gets smaller but you will need to reconsider the 100% fixed height of the container at that point.

I have put comments in the CSS to highlight the important bits.

* {
  box-sizing: border-box; /* so borders and padding dont get in the way */
}

html,
body {
  height: 100%; /* you didint need width 100% here */
  margin: 0;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 100%;
}

.img-wrap {
  width: 25%;
  height: 50%;
  display: flex; /* flexbox layout for the image wrappers, allows for... */
  align-items: center; /* ...easy centering */
  justify-content: center;
  padding: 10px; /* just some spacing so the images can breathe, remove if you want them edge to edge */
  border: 1px solid red; /* so you can easily see the bounds of the wrapper divs, remove this */
}

.img-wrap img {
  max-width: 100%; /* max dimensions on the images so they always fit */
  max-height: 100%;
  height: auto; /* maintain aspect ratio */
  width: auto;
}
<div id="flex-container">
  <div class="img-wrap"><img src="https://picsum.photos/200"></div>
  <div class="img-wrap"><img src="https://picsum.photos/300/200"></div>
  <div class="img-wrap"><img src="https://picsum.photos/400/800"></div>
  <div class="img-wrap"><img src="https://picsum.photos/500/250"></div>

  <div class="img-wrap"><img src="https://picsum.photos/450/505"></div>
  <div class="img-wrap"><img src="https://picsum.photos/350/520"></div>
  <div class="img-wrap"><img src="https://picsum.photos/250/300"></div>
  <div class="img-wrap"><img src="https://picsum.photos/550/200"></div>
</div>

Upvotes: 3

Related Questions