CODEWITHSUNDEEP
htmlimagecssflexbox
Higeath
Higeath

Reputation: 561

Resizing flex div image instead of cropping

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>

Upvotes: 2

Views: 2986

Answers (3)

kukkuz
kukkuz

Reputation: 42362

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!

Upvotes: 2

Zain
Zain

Reputation: 11

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!

Upvotes: 1

O_Z
O_Z

Reputation: 1563

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

Upvotes: 1

Related Questions