如何在浏览器的宽度自动调整大小调整大小但保持相同的高度？ [英] How to resize image automatically on browser width resize but keep same height?

问题描述

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

I am trying to replicate the same effect that this website has: http://www.knockknockfactory.com/

当调整浏览器宽度时，图片会自动变小，但其占据的区域的高度保持不变。

When the browser width is resized the image automatically gets smaller but the height of the area in which it occupies stays the same.

当我试图复制这个，我的图像也变小了，但高度改变？

When i try to replicate this, my image also gets smaller but the height changes?

我的代码到目前为止：

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

CSS：

body {
    margin: 0;
    padding: 0;
}

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

如何在浏览器调整大小时减少/增加图片，相同的高度使用CSS在网站上？

How do i get my image to decrease/increase upon browser resize but still keep the same height using CSS like on that website?

推荐答案

我使用了完整的完整页面背景图片在上一个网站上完成此操作。

I've used Perfect Full Page Background Image to accomplish this on a previous site.

-size：cover; 如果您只需要支持现代浏览器。

You can use background-size: cover; if you only need to support modern browsers.

这篇关于如何在浏览器的宽度自动调整大小调整大小但保持相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！