Question

我有以下代码，图像目前没有缩放以适应。它只会改变，如果重新加入例如photoshop，它是否不能按100％设置缩放？

HTML

<!-- Section: intro -->
    <section id="intro" class="intro">
        <div class="slogan">
            <h2>TITLE <span class="text_color">2015</span> </h2>
            <h4>TITLE 2</h4>
        </div>
        <div class="page-scroll">
            <a href="#about" class="btn btn-circle">
                <i class="fa fa-angle-double-down animated"></i>
            </a>
        </div>
    </section>
    <!-- /Section: intro -->

CSS

.intro {
    width:100%;
    position:relative;
    background: url(../img/bg1.jpg) no-repeat top center;
}

Answer 1

我相信你想要的造型是

background-size: cover

这是一个很好的教程： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

或者如果图像必须绝对缩放，那么它总是显示整个图像：

background-size: 100% 100%

Answer 2

你可以使用这样的东西;

.intro {
   width:100%;

    position:relative;

    background-image: url(../img/bg1.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

或者使用关键字作为背景大小，其行为会有所不同。（http://www.w3schools.com/cssref/css3_pr_background-size.asp）

尝试选择适合您需求的任何内容。

最好，

图像无法使用CSS缩放

2 个答案: