Resizing flex div image instead of cropping

Question

I have a flex with 3 images and I would want them resize if a window is too small right now when window gets smaller first they reorder so they stack vertically and when window gets even smaller the picture gets squeezed instead of resized I would want to keep the image with proper aspect ratio.

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  height: 16rem;
  max-width: 100%;
}

<div class="images">
  <div>
    <img src="http://placehold.it/150x200">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/150x100">
  </div>
</div>

is your 16rem a necessity? what do you really want to achieve with that? — Daniel, Sep 24 '16 at 19:20
@Daniel no but I wanted uniform height at least at max-width — Higeath, Sep 24 '16 at 19:21
How do you want to deal with images that have a big height, do you want to scale them down to fit a certain height? Should images have a max-height? — Daniel, Sep 25 '16 at 12:33

score 2 · Accepted Answer · edited May 23 '17 at 10:27

First of all the basic thing to keep in mind to maintain aspect ratio (I'm sure you already know this) is to restrict only one dimension of an image. (Read this)

You are already breaking this in your code- resulting in the 'squeeze' at smaller screen widths:

.images img {
  height: 16rem;
  max-width: 100%;
}

When window gets smaller first they reorder so they stack vertically and when window gets even smaller the picture gets squeezed instead of resized I would want to keep the image with proper aspect ratio.

So here are your options:

So I guess you should remove max-width: 100% and keep width adjust depending on the 16rem height.

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  height: 16rem;
  /*max-width: 100%;*/
}

<div class="images">
  <div>
    <img src="http://placehold.it/150x200">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/150x100">
  </div>
</div>

Well, for small widths you would have horizontal scroll. According to the particular case, if needed you can use some media queries to adjust height at small screen widths.

Let me know your feedback on this. Thanks!

I was cracking my brain to solve this since friday, and I still didn't found a solution with both width and height measures without media queries! But I still think there must be a way to get it working! gj on the accepted answer! :) — Daniel, Sep 25 '16 at 21:31

O_Z · Answer 2 · 2016-09-24T19:37:55.967

1

.images img{
      height: 16rem;
    max-width: 100%;
    object-fit: contain;
    }

edited Sep 24 '16 at 19:37

answered Sep 24 '16 at 18:45

O_Z

1,515
9
11

Do note that `object-fit` still has poor browser support – Asons Sep 25 '16 at 12:03

Zain · Answer 3 · 2016-09-24T23:45:34.187

1

For the aspect ratio fix, you can just run with the CSS3 object-fit property. CSS3 Object-Fit

Set it on your image as:

.images img {
    object-fit: contain;
}

That should do the trick of keeping the aspect ratio of the image.

As for the Wrapping that takes place within the flex container, just take out the flex-wrap property in your code so they'll all stay on the same row, rather than wrapping as the container size gets smaller.

EDIT

Try adding a align-self CSS Property to the .images img, see if that's what you're looking for:

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  width: 100%;
  height: auto;
  object-fit: contain;
  align-self: flex-start;
}

Hope this helps!

edited Sep 24 '16 at 23:45

answered Sep 24 '16 at 19:06

Zain

11
3

it kinda works but creates huge padding at the top and bottom – Higeath Sep 24 '16 at 19:13
@Higeath It's because of the `object-fit` CSS property, it'll proportionally scale down the image to its center. You could try adding a `align-self: flex-start` to the img and see if that's what you're looking for. I've edited the code above! – Zain Sep 24 '16 at 23:42
@Higeath Do note that `object-fit` still has poor browser support – Asons Sep 25 '16 at 12:02

Resizing flex div image instead of cropping

3 Answers3