How to easy make resizable image that keeps aspect ratio at resize?

StackOverflow https://stackoverflow.com/questions/23671612

Question

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)

Was it helpful?

Solution

This is the a great resource about whats you asking.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top