使背景图像不可调整大小

Question

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

<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 像素，并且当视口变小时照片会缩小。有没有办法让图像无响应或有其他解决方案？

这里还有一个 link 实际网页：http://skiest.ragne.me/。您可以单击导航中的进程 link，它会将您带到提到的照片。

感谢您的帮助。

Answer 1

我认为您正在寻找 background-size: cover; 这将：

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

source w3schools.com

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

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

或者您可以只删除 background-size 声明，看看是否能得到您想要的结果。默认值为 auto，这应该使图像保持正常大小。

使背景图像不可调整大小

Making background image not-resizable

html

css

background-image

responsive-design

twitter-bootstrap