Question

我正在使用Boostrap，并且我使用以下标记和CSS将背景图像设置为空div：

<section id="process">
  <div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div>
  <!--end container-->
  <div id="processbg"></div>
  <div class="container">
    <h2 class="text-center">materials and construction</h2>
    <p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p>
    <p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p>
  </div>
  <!--end container--> 
  <img src="img/bigski.jpg" class="center-block bigski">
  <div class="container text-center">
    <h2 class="text-center more"><a href="#">read more</a></h2>
  </div>
  <!--end container--> 
</section>
<!--end process-->

和

#processbg {
    background: url(../img/process.jpg) no-repeat center 110% fixed;
    height: 602px;
    background-size: 100%;
}

台式机和平板电脑上的一切看起来都不错，但在移动设备上观看时，图像变得非常小，并且在它周围留下了很大的空隙。这是有道理的，因为空div的高度始终为602像素，并且当视口变小时照片会缩小。有没有办法让图像无响应，还是有其他解决方案？

此处还有指向实际网页的链接：http://skiest.ragne.me/。您可以单击导航中的PROCESS链接，它会将您带到上面提到的照片。

感谢您的帮助。

Answer 1

我认为你正在寻找background-size: cover;，它将：

将背景图像缩放为尽可能大背景区域完全被背景图像覆盖。一些部分背景图像可能不在背景中定位区域

source w3schools.com

将您的CSS更改为以下内容，看看它是否适合您。

#processbg {
    background: url(../img/process.jpg) no-repeat center 110% fixed;
    height: 602px;
    background-size: cover;
}

或者你可以删除background-size声明，看看是否能提供所需的结果。默认值为auto，应使图像保持正常大小。

使背景图像无法调整大小

1 个答案: