如何在浏览器宽度调整大小时自动调整图像大小但保持相同的高度？

Question

我试图复制与本网站相同的效果:http://www.knockknockfactory.com/

调整浏览器宽度大小后,图像会自动变小,但其所占区域的高度保持不变.

当我试图复制这个时,我的图像也会变小但高度会变化吗？

到目前为止我的代码是:

 <div id="image"><img src="cover.png" /></div>

CSS:

body {
    margin: 0;
    padding: 0;
}

img { 
    max-width: 100%; 
    height: auto; 
}

如何在浏览器调整大小时减少/增加我的图像,但仍然使用CSS在该网站上保持相同的高度？

Answer 1

我在以前的网站上使用了完美的整页背景图像来完成此任务。

您可以使用背景大小：封面；如果您只需要支持现代浏览器。