如何减小图像宽度答案

【问题标题】：How to reduce image width如何减小图像宽度
【发布时间】：2017-08-17 03:42:43
【问题描述】：

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

<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;  
 }
}

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

【问题讨论】：

标签： html image media-queries parallax image-resizing

【解决方案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>

如果您想要与此不同的任何东西，请告诉我。

【讨论】：