Question

我想知道当屏幕宽度减小时如何调整本节中的图像大小。图像是视差效果的一部分，但它不是背景，它是滚动的东西（我通常发现它是文本）。

<div class="bgimg-1 w3-display-container" id="home">
  <div class="w3-display-middle" style="white-space:nowrap;">
    <img src="logo3.png" alt="Logo" style="width:1000px;height:750px;">
  </div>
</div>

我使用 style 修复了尺寸，但需要在需要时减少它。在整个代码的开头，在该部分之前，我可用的选项是

   @media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;  
 }
}

仅关闭较小宽度的视差滚动。在这部分中找到的图像参考是背景图像，我不需要调整大小。为了在前面提到的部分（不是背景）中调整图像大小，我应该包括什么？

Answer 1

如果您碰巧使用Bootstrap，Materialize或任何其他响应式CSS模板，只需将图像保留为原始分辨率，并将其标记放在响应式容器中。使用Bootstrap，每个视图分为12列，它看起来像：

<div class="row">
    <div class="col-sm-6 col-offset-3">
        <img src="logo3.png" alt="Logo" />
    </div>
</div>

如果您想要与此不同，请告诉我。

如何减少图像宽度

1 个答案: