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

我正在尝试复制此网站具有的相同效果：

调整浏览器宽度时，图像会自动变小，但其所在区域的高度保持不变

当我尝试复制这个时，我的图像也会变小，但高度会改变吗

到目前为止，我的代码是：

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

---

如何让我的图像在浏览器调整大小时减少/增加，但仍然像在那个网站上一样使用CSS保持相同的高度

您应该了解CSS的媒体查询。您所指的站点正在使用相同的。该网站基本上是使用不同的CSS每次浏览器窗口大小的变化。 这是样本的链接

我曾经在以前的网站上完成过这项工作

---

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

您链接的网站不会更改图像的宽度，但实际上会将其截断。为此，需要将其设置为背景图像

有关背景图像的更多信息，请查看

用法：

#divID {
    background-image:url(image_url);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

---

将其设置为背景图像并大于100%以获得所需效果：

HTML

CSS

body，html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#形象{
宽度：100%；
高度：500px；
背景：#000 url（'http://static.ddmcdn.com/gif/dog-9.jpg中心不重复；
背景尺寸：自动200%；
}

更改图像的宽度将自动更改高度

您希望有多少张图片具有此功能？如果它很大，而且它们都有不同的高度，你可能也应该让高度改变

假设您有5个高度为400px的图像，在html中为这5个标记指定一个固定的类

.fixed { width: 100%; height: 500px !important }

---

这样可以改变宽度，但保持高度不变。

由于调整高度有困难，您可以使用此功能。

---

我不确定你把图片放在什么大小或位置，但这可能会有帮助

这是一个老问题，但我想补充一点，如果您只想使用css根据视口大小调整图像大小；可以使用视口单位“vh（视口高度）或vw（视口宽度）”

---

只需使用

宽度：100%高度也应该是固定的高度，以像素为单位（例如，
高度：100px；
）它看起来不像您链接到的站点上的图像实际更改了图像大小，它只是将其截断。在这种情况下，您只需要像它们一样使用背景图像。谢谢！这正是我想要的，而不是使用大量的媒体查询，我只需要在宽度非常小的时候使用一些。谢谢，这也创造了我想要的
.fixed { width: 100%; height: 500px !important }

img{
width: 100%;
height: 100%;
max-height: 300px;
}

.img {
width: 100vw;
height: 100vh;
}