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上的示例。

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

1 个答案: