Question

这就是背景在我的CSS中。图片非常适合这样，我不想在普通浏览器中更改位置或大小或任何内容。我只是希望在手机设备或平板电脑上查看时图像会自行调整大小。

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/mee.JPG) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: 0px 1px;
}

这是html部分：

 <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-1">
                        <h1 class="brand-heading">Welcome</h1>
                        </div>
                            <div class="col-md-8 col-md-offset-4">
                        <font size= "6"><marquee behavior="slide" scrollamount ="22"><b>ENGINEER</font></marquee>
                        <font size= "6"><marquee behavior="slide" scrollamount ="20"><b>DEVELOPER</b></font></b></marquee>
                        <font size= "6"><marquee behavior="slide" scrollamount ="18"><b>COFFEE ADDICT</b></font></b></marquee>
                        </div>
                      <div class="buttonn">
                        <a href="#about" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

Answer 1

您需要为不同的屏幕尺寸创建额外的css，从而使其具有响应性。

这是一个很好的链接，解释了这个问题以及如何解决这个问题：connect

最常用于响应式网页设计的CSS是min-width，max-width，min-height和max-height。

希望这有用：）

如何使我的背景图像响应，以便它在iphone和android上正确显示

1 个答案: