html - 如何将任意大小的图像放在框架中间

Question

我尝试在框架内设置图像。

风格

#wrapper {
        border: 2px solid black;
        width: 600px;
        height: 400px;
        overflow:hidden;
        position: relative;
        display: inline-block;
    }
    img{
        position: absolute;
        height:auto;
    }

HTML

<div id="wrapper">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="our img"  />
</div>
<br>
<div id="wrapper">
    <img src="http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg" alt="our img"  />
</div>

有什么方法可以确保图像显示在框架中间，如 this ？

Answer 1

像这样:

#wrapper {
        border: 2px solid black;
        width: 600px;
        height: 400px;
        overflow:hidden;
        position: relative;
        display: inline-block;
        text-align:center;
    }
img{
      max-width: 100%;
}

<div id="wrapper">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="our img"  />
</div>
<br>
<div id="wrapper">
    <img src="http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg" alt="our img"  />
</div>