CODEWITHSUNDEEP
htmlimageresizeaspect-ratio
Kosmo零
Kosmo零

Reputation: 4151

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

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)

Upvotes: 0

Views: 692

Answers (1)

vaskort
vaskort

Reputation: 2861

This is the a great resource about whats you asking.

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

Upvotes: 2

Related Questions