Keep aspect ratio of dynamically loaded image

Question

On my website, users can upload pictures. They can be of various sizes, but I want them to fit in boxes of the same height, so they can be put next to each other and form a grid. The image should be centered in the box, keeping it's aspect ratio. Can I do this in CSS? I've been trying things with flexbox, but I can't make it work.

e.g.

If height is larger than width:

|-------------| 
|   imageim   |
|   ageimag   |
|   eimagei   |
|   mageima   |
|   geimage   |
|   imageim   |
|-------------|

If width is larger than height:

|-------------|
|             |
|imageimageima|
|geimageimagei|
|mageimageimag|
|eimageimageim|
|             |
|-------------|

I've tried that, but it didn't work. Maybe it's because the height and width of my containing div is set to 100%, instead of a fixed value? — raichu, Jun 11 '16 at 13:48
See this post and answer if that helps - http://stackoverflow.com/q/34713763/483779 but be aware of the browser support details. — Stickers, Jun 11 '16 at 14:16
Posted an answer for you, though to understand better what you look for, a picture showing an expected layout with a mix of image sizes would be great. — Asons, Jun 11 '16 at 16:21

Asons · Accepted Answer · 2016-06-11T16:58:37.933

Here is a 5 x 5 grid, scaling, downloadable, using flex.

Fiddle version

.parent {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.parent a {
  display: inline-block;
  height: calc(20% - 2px);
  width: calc(20% - 2px);
  background: #ddd no-repeat center center;
  background-size: contain;
  margin: 1px;
}
.parent a:nth-child(odd) {
  background-image: url(http://lorempixel.com/300/150/animals/3);
}
.parent a:nth-child(even) {
  background-image: url(http://lorempixel.com/150/300/animals/3);
}

<div class="parent">
  
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

</div>

Thanks for answering. There is one downside to your solution. The images can't be downloaded. The section of the site will function as a kind of photo book, so it would be nice if users could download the pictures. Also, I would like the pictures to scale with the surrounding div, so the width and height should be expressed in % instead of pixels. I'm trying to make a grid with 5 columns and 5 rows. I could try to do it in JavaScript, but I would like to know first whether there is a css solution, maybe using the new layouts like flexbox (of which I don't know much). — raichu, Jun 11 '16 at 16:39
Thank you! Awesome. I've been fiddling around with flexboxes the whole afternoon.:) — raichu, Jun 11 '16 at 17:32

score -2 · Answer 2 · answered Jun 11 '16 at 13:20

-2

height: 100px;
width: auto;

This will resize the images to fit that height.

answered Jun 11 '16 at 13:20

Achshar

5,153
8
40
70

Thanks for helping, but this only works in one situation: when the image is oriented vertically. But people should also be able to post horizontally oriented pictures. – raichu Jun 11 '16 at 13:27
Why wouldn't it work then? It will scale the images irrespective of their dimensions. Horizontal or vertical. You can add a text-align center to the parent of you want to align them to center. Or do you also want to box to be of a fixed width as well? In that case put a max-width: 100px on it. – Achshar Jun 11 '16 at 13:28
The box shouldn't be fixed width, but a percentage of it's parent. The goal is to create a grid for a user's images. – raichu Jun 11 '16 at 13:51
Yeah that and a justify-content: space-around on parent flex box is what I use for doing exactly that. – Achshar Jun 11 '16 at 15:39

Keep aspect ratio of dynamically loaded image

2 Answers2