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属性。

请参阅下面的代码段。让我知道它是否有效

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

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

更多信息：

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

一个。的内含

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

B中。的封面


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

正如文档（info here）中所述，如果您的容器小于cover，则使用background-image时不会调整图片大小。但是contain完全符合你的需要。

如果您愿意，可以使用cover和contain来查看差异

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

使用CSS是唯一可以做的事情。我认为：）

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

请参阅下面的代码段或更好地查看 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>

适合的背景图片

1 个答案: