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

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

我用过 Perfect Full Page Background Image在以前的站点上完成此操作。

如果您只需要支持现代浏览器，您可以使用background-size: cover;。