如何减少图像宽度

时间:2017-08-16 19:19:27

标签: html5 image media-queries parallax image-resizing

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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