0

I need to put in html page the image that will resize with keeping aspect ratio when browser border will change. Something like that: enter image description here

I tried this:

<html>
    <head>
        <title>Test Resize</title>
    </head>

    <body>
        <div style = "width: 100%;"><img src = "zast.jpg" style = "width: 100%;"></div>
    </body>
</html>

But the image resizes when width only changes, if I change height of window, just a scroll appears.
If I add height: 100% to both tags, then image resizes without keeping aspect ratio. What could I do to achieve what I need?
I looking for some really easy way, like two - three tags. But if no such way, I would be glad to anything.

It can be not img tag. I could use anything (for example background of div or table or td)

Kosmo零
  • 4,001
  • 9
  • 45
  • 88
  • This will surely help: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/ – vaskort May 15 '14 at 07:55
  • 1
    Thank you. This is really helped. The minimal working thing is: `
    ` make it as answer and I accept it.     – Kosmo零 May 15 '14 at 08:01

1 Answers1

2

This is the a great resource about whats you asking.

http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

vaskort
  • 2,591
  • 2
  • 20
  • 29
  • 1
    Just leave your solution here for more visibility as alternative way: `
    ` Hovewer, in IE6 image gets cropped.     – Kosmo零 May 15 '14 at 08:46
  • @Kosmos thank you, by the way dont you think supporting IE6 is too much, I think Microsoft told that they will support it till April 2014, will search for the link, dont know if it was a rumour. – vaskort May 15 '14 at 08:58
  • IE6 is old right. I told about this just as example. Real problems that in IE8 is the same, while that's the highest IE for Win XP and I not planning to drop it's support. – Kosmo零 May 15 '14 at 09:00