当浏览器宽度/高度发生变化时自动调整图像大小答案

【问题标题】：Automatically resizing images when the browser width/height changes当浏览器宽度/高度发生变化时自动调整图像大小
【发布时间】：2018-07-04 07:43:31
【问题描述】：

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

编辑：我按照你们的建议做了一切，但仍然没有用。

<!DOCTYPE html>
<html>

<body background="">

  <head>
    <style>
      div.asciigun {
         top: 30%;
         left: 50%;
         position: absolute;
         max-width: 100%;
  
      }
    </style>
  </head>

  <body>


    <div class="asciigun">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
      </div>

  </body>

</html>

【问题讨论】：

你试过把<meta name="viewport" content="width=device-width, initial-scale=1.0"/>放在你的html页面的head部分吗？
我刚刚添加了它，但图像仍然没有按比例变小
设置宽度占所有案例的百分比。每个地方的宽度都应该是百分比。您的窗口为 100%，然后根据您的需要找到以 % 为单位的图像宽度。
你也可以看看here
你没有关闭你的img标签，它后面有一个随机的</a>。

标签： javascript html css image

【解决方案1】：

让我们尝试另一种方法。尽量不要修改max-width或max-height。保持原样（或设置width: 100% 和height: 100%）。

然后将<img src="url.jpg"> 更改为background: url("url.jpg"); 然后就可以了

.image {
    background-size: cover;
}

或

.image {
    background-size: contain;
}

【讨论】：

div 会发生什么？我在这里做错了
78.media.tumblr.com/a754187de32b0e20f8efc10a480970e2/…); height="500" width="275"> .image {背景尺寸：封面；}

【解决方案2】：

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

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

【讨论】：