Css Image Resize based on height

Question

I am aware of resizing images bases on width:

img{
  max-width: 100%;
  height: auto;
}

or

img{
  width: 500px;
  height: auto;
}

Is there a way to do it by height? This does not seem to work:

img{
  height: 500px;
  width: auto;
}

How can I do this?

The percentages you use is a percentage of the container that the element is in. You CAN do a height percentage or actual px should work as well, just don't specify the width? — ntgCleaner
– ntgCleaner, Commented Mar 13, 2014 at 20:02
can you add some HTML code where this doesnt seem to be working ? :o — Ron
– Ron, Commented Mar 13, 2014 at 20:16

datatest · Accepted Answer · 2014-03-13 20:16:24Z

4

From what you have shown it should work fine.

img{
  height: 500px;
  width: auto;
}

The above code does work, make sure it's not in a restrictive div, or another style is overwriting it

answered Mar 13, 2014 at 20:16

datatest

4632 gold badges5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2014-03-13 20:08:13Z

0

You in fact can explicitly declare a height of 100px (for example) with height: 100px;. If your code isn't working this way, there may be something else outside of this context that is causing the problem.

answered Mar 13, 2014 at 20:08

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

Collectives™ on Stack Overflow

Css Image Resize based on height

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related