在div中按比例缩放图像

Question

I have an image area in which a random image will be visible. How do I make the image fit to its width or height within the image area while maintaining the image proportions?

This is what I tried, but it distorts the image:

<div style="float:right;"> <!-- img area -->
    <img style="max-width:100%; max-height:100%;" src="rand/greetings.png"/>
</div>

Answer 1

Just set width or height to 100% but not both, this will keep the proportions of the image and allow it to scale.

<div style="float:right;"> <!-- img area -->
    <img style="width:100%;" src="rand/greetings.png"/>
</div>

EDIT:

To prevent an image spilling out of your area vertically try setting a max-height in pixels on the image and image area:

<div style="float:right; max-height:100px;"> <!-- img area -->
    <img style="width:100%; max-height:90px;" src="rand/greetings.png"/>
</div>

Answer 2

如果要保持简单，可以将此图像设置为background-image并使用background-size:contain;

Answer 3

The following will keep an image horizontally aligned within a div (use the full page link and change the browser size to see the image change size)

 #wrap { border:1px solid #000000; position: relative; width: 50%; height: 400px; overflow:hidden; } #wrap > img { width: 100%; position:absolute; top:50%; transform: translateY(-50%); } 

 <div id="wrap"> <img src="http://lorempixel.com/800/800/city/1/" alt="" /> </div>