时间戳

首页 > 解决方案 > 我可以根据浏览器的缩放调整图像大小吗？

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

问题描述

我在一个网站上工作，我注意到当我缩小浏览器时，除了图像之外的所有内容都会调整大小。无论浏览器的 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>

标签： javascriptjqueryhtmlcss

解决方案

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

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

具有固定宽度和高度的图像会缩小/增长，而以百分比指定宽度的图像不会。

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

jsfiddle上的示例。

推荐阅读