javascript - 我可以根据浏览器的缩放比例调整图像大小吗？

Question

我在一个网站上工作，我注意到当我在浏览器中缩小时，除了图像之外的所有内容都会调整大小。无论浏览器是 100% 还是 50%，图像都保持相同的大小。有没有一种方法可以根据浏览器的缩放比例对图像进行编码以调整大小？

我正在为这个网站使用 HTML5、CSS 和 JavaScript。图像是使用 JavaScript 呈现的。

function get_attrs() {
  // change the avatar based on requirements
  if (convStyle == 'dominant') {
    $("#robo-image").attr("src", "images/avatar/D-Robo.png");
    $(".user-description").prepend("<h3>Max</h3>");
  } else if (convStyle == 'submissive') {
    $("#robo-image").attr("src", "images/avatar/S-Robo.png");
    $(".user-description").prepend("<h3>Linus</h3>");
  }
}

.robot-section {
  overflow: hidden;
  padding: 3rem 0 3rem 2rem;
  /*padding: 3rem 0rem;*/
}

.robot-section {
  overflow: hidden;
  padding: 3rem 0 3rem 2rem;
  /*padding: 3rem 0rem;*/
}

.robot-content-bottom {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  /*position: absolute;*/
  /*bottom: 5%;*/
}

<div class="col-sm-6 col-md-4 col-lg-3 robot-section">
  <div class="robot-content-top">
    <div id="messageContainer"></div>
  </div>
  <div class="robot-content-bottom text-center">
    <img id="robo-image" alt="avatar" class="avatar-img">

    <div class="user-description">
      <h4>Your personal financial advisor</h4>
    </div>
    <!--<div class="user-description">-->
    <!--&lt;!&ndash;<h3 style="margin-top: 30px;">Ethan</h3>&ndash;&gt;-->
    <!--&lt;!&ndash;<h5>Your personal financial advisor</h5>&ndash;&gt;-->
    <!--</div>-->
  </div>
</div>

Answer 1

我相信您正在处理用百分比指定的宽度或高度的问题。

如果您将宽度指定为百分比 (100%)，则图像将始终为浏览器的 100% 宽度，并且不会随着缩放而缩小/增大。

固定宽度和高度的图片会收缩/增长，而宽度指定百分比的图片则不会。

<img id="image" src="" width="622" height="350">
<img id="image2" src="" width="100%">

关于 jsfiddle 的示例.