CODEWITHSUNDEEP
css
user2726041
user2726041

Reputation: 359

Fixed height but responsive images

I have a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:

.img-logo {
   width: auto;
   height: 50px;
}

This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.

I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:

.img-logo {
   max-width: 100%;
   width: auto;
   height: 50px;
}

This works but the aspect ratio is compromised due to the height property remaining 50px.

Any ideas?

Upvotes: 0

Views: 1308

Answers (2)

DistantMars
DistantMars

Reputation: 1

I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try @media,which can provide different css styles in different conditions.

Upvotes: 0

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13928

With a fixed height and variable width either of the below can happen.

  1. The img gets stretched to accommodate the variable width and skew the aspect ratio.
  2. The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.

So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.

Upvotes: 1

Related Questions