0
img {
    width: 100%;
    height: auto;
}

The code above resizes the images width with the with of the page, while keeping the same ratio with the height.

Why doesn't

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

resize the image's height with the pages height, while keeping the same ratio with the width? Is there another way I can have that effect on my image?

Mashpoe
  • 504
  • 1
  • 9
  • 27
  • 1
    I think it does https://jsfiddle.net/q3os7gfw/ – Nenad Vracar Jan 10 '16 at 19:54
  • Why did you set the `html, body` height to 100%? It made the code work, but why? – Mashpoe Jan 10 '16 at 19:59
  • 2
    Well if you set `height: 100%` on `img` then you also must set 100% height on all parents in this case html and body, Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content. More here http://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements – Nenad Vracar Jan 10 '16 at 20:01
  • Thanks! Now I understand :) – Mashpoe Jan 10 '16 at 20:08
  • Possible duplicate of [CSS – why doesn’t percentage height work?](http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) – Stickers Jan 10 '16 at 21:00

1 Answers1

0

May be height is not defined of parent of img. So please put any height to the parent of img then try.

Sarower Jahan
  • 1,445
  • 1
  • 13
  • 20