0

I have an image that i want to fit in the browser window. The width and the height should not be more than the window width and height.

I have made an function that works for the width but not for the height at the same time.

Se my JS BIN and drag the browser window up and down right to left and the proportions is wrong

Claes
  • 61
  • 1
  • 6
  • check this question : http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang – ebram khalil Feb 26 '13 at 11:24
  • That only makes the image responsive for the width. In an ordinary site that would be the answer. But I'm only showing 1 image on my site and nothing else. So what I want is to make the image max-height and max-width. The image can't be wider or higher then the browser window and have to be in the right propotions. – Claes Feb 27 '13 at 17:06

2 Answers2

0

Try

CSS: 

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

this will make the image smaller if the container where the image is placed gets smaller than the image is.

And an UL-Element requires LI-Child-elements.

Merec
  • 2,751
  • 1
  • 14
  • 21
  • Merec: Thanks for your reply. I have tried that, but that did not work. I can't find any solution regarding my problem. So I decided to skip max-height. – Claes Feb 27 '13 at 16:53
0

Your jQuery code $("#book li img") will not work as there is no li inside your ul element.

I hope this is what you are looking for

Working Fiddle

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • Thanks for your answer. Oh sorry! My misstake. Offcourse there is a
  • -tag inside my
      . Missed to write that in my question. Your fiddle did not work as expected. The image must have the right proportions.
    • – Claes Feb 27 '13 at 17:01
  • @Claes yes I do understand what you are trying to do here. but it seems not possible with `img` tags. you should try `background-size: 100% 100%` keeping the image as `background-image` instead of `img` here. This is purely my opinion. – Mr_Green Feb 28 '13 at 05:44