按比例调整图像大小并将其定位为中心

Question

我试图在整页中显示图像，如果浏览器窗口的大小减小，图像应按比例调整大小。

当浏览器尺寸减小时，我应该能够将图像放到页面的中心。

我尝试过这样的事情fiddle

HTML

<div>
    <img src="http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg"/>
</div>

CSS

*{
 margin: 0;
}
html{
  background-color: #666666;
}
img { 
 height: auto;
 width: 100%;
}
div{
 height: auto;  
 width: 100%;
 position: absolute;
 top:0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
}

我不确定我是对的。任何人都可以帮助我

Answer 1

将img height更改为100％并将overflow：hidden更改为html。适合我！