适合的背景图像

Question

我没有要展示的代码，但我正在尝试将 img 或背景图像完全安装在容器内，并在屏幕调整大小时调整大小。 有人可以帮忙吗？

编辑：我特别希望背景保持适合 div

<!-- Intro Section -->
<section class="success" id="about">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 text-center">
                <h2>intro</h2>
                <!--<hr class="star-light"> -->
                <br>

                <p>
                    text
                </p>

                 <p>
                   text 
                </p>


            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2">

            </div>
            <div class="col-lg-4">

            </div>
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <a href="#" class="btn btn-lg btn-outline">
                    <i class="fa fa-download"></i> download
                </a>
            </div>
        </div>
    </div>
</section>
<!-- End of intro section -->


#about{

}

Answer 1

使用background-size:contain 属性。

参见下面的 sn-p。让我知道它是否有效

#container {
  height:400px;
  width:100%;
  background:url("http://beerhold.it/579/300") no-repeat scroll center center / contain transparent;
}

<div id="container">

</div>

更多信息：

background-size: auto|length|cover|contain|initial|inherit;

我建议使用contain 而不是cover，因为：

A. 包含

将图像缩放到最大尺寸，使其宽度和高度都可以容纳在内容区域内

B. 封面

将背景图像缩放到尽可能大，以便 背景区域完全被背景图像覆盖。一些 背景图像的某些部分可能不在背景中显示 定位区域

正如文档 ( info here ) 中所说，如果您的容器小于 background-image ，则使用 cover 不会调整图像大小。但contain 正是您所需要的。

如果您愿意，可以使用 cover 和 contain 来看看区别

要同时拥有这两种行为（拉伸和调整大小），您可以使用媒体查询（有多种方法可以做到这一点。这只是一个示例）

使用 CSS 是您唯一可以做的事情。我认为:)

我使用了@media only screen and (max-width: 579px) {，因为579px 是本例中img 的宽度

参见下面的代码 sn-p 或更好地参见 jsfiddle

#container {
  height:300px;
  width:100%;
  background:url("http://beerhold.it/579/300") no-repeat scroll  center top transparent;
  background-size:cover;
}
@media only screen and (max-width: 579px) {
#container {background-size:contain;}

}

<div id="container"></div>