Javascript 屏幕尺寸变大时收缩Div

我有几个图像创建，我需要改变他们的宽度和高度，因为我的屏幕尺寸越来越大或越来越小。我需要图像随着屏幕大小的增加而缩小。我最初想到的是大众和vh，但我无法根据需要操纵我的图像。有什么想法吗

---

如果这在CSS中是不可能的，那么在html、javascript或jquery中可能吗？

只需将其添加到您的HEAD标记中即可

<meta name="viewport" content="width=device-width, initial-scale=1">

对于图像的大小，请尝试在css中使用

width:100%

，并在css中的html和body中添加这一行

height:100%

您可以在这里看到一个演示：

---

如果我真的理解您在增加页面时会收缩，您可以测试：

.img{
    width: calc(200px - 10vw); /*for example */
}

---

最好使用

minwidth，minheight

来避免不需要的尺寸。

是的，你可以用CSS来实现。您可以使用CSS中的媒体查询来更改图像达到特定宽度断点时的大小。例如：

@media only screen and (max-width: 768px) {
    .image {
        width:500px;
        height:500px
    }
}

@media only screen and (max-width: 320px) {
    .image {
        width:300px;
        height:300px
    }
}

上面的代码的结果是，当屏幕大小小于768px时，图像的高度和宽度将分别为500px。当你的屏幕尺寸小于320px时，你的图像高度和宽度将分别为300px

有关更多信息，您可以搜索“响应式网页设计”和“媒体查询”

如果您使用的是bootstrap，那么您只需为您的映像提供“img responsive”类，工作就完成了

注意：您必须在页面的标题部分添加以下内容：

 <meta name="viewport" content="width=device-width, initial-scale=1">

---

我希望这会有所帮助

一个简单的谷歌搜索会让你找到足够的结果来解决这个问题：你有没有尝试过使用媒体查询来解决这个问题？视屏幕的宽度而定，看起来很笔直。