Javascript 浏览器宽度/高度更改时自动调整图像大小

我有一个div中有很多图像的页面，只有在全尺寸下，布局看起来才好，当浏览器窗口变小时，它真的很乱。我发现了一个关于堆栈溢出的类似问题，但他们的答案不适用于我的情况

编辑：我做了你们建议的所有事情，但仍然不起作用

阿西贡分区{
最高：30%；
左：50%；
位置：绝对位置；
最大宽度：100%；
}

让我们尝试另一种方法。尽量不要修改

最大宽度

或

最大高度

。只需保持原样（或设置

宽度：100%

和

高度：100%

）

然后将

更改为

背景：url（“url.jpg”）然后就这么做

.image {
    background-size: cover;
}

或

好吧，我知道了！我需要的是视口值而不是%。现在，图像与浏览器大小成比例，并保持不变

div.asciigun {
    position: absolute;
    top: 30vw;
    left: 74vw;
    z-index: 1;
    width: 30vw;
    height: 15vw;
}

你试过把
放在html页面的标题部分吗？我刚刚添加了它，但在所有情况下，图像的宽度仍然没有按比例变小。每个位置的宽度应以百分比表示。您的窗口为100%，然后根据您的要求以%的宽度查找图像。您还可以查看您没有关闭img标签，并且在其后面有一个随机的
。div会发生什么情况？我在这里做错了div.image{背景尺寸：封面；顶部：30%；左侧：50%；位置：绝对；宽度：100%；}
div.asciigun {
    position: absolute;
    top: 30vw;
    left: 74vw;
    z-index: 1;
    width: 30vw;
    height: 15vw;
}