Question

我是bootstrap和HTML＆amp;的新手。 CSS。我试图在我正在尝试创建的网站上使用jumbotron，但是当我应用背景图像时，即使窗口的大小发生变化，我也希望它能够修复大小，实际上我想在所有网站上进行

这是完整尺寸时的图像，以及无论窗口大小如何，我都希望它如何

这是我缩小窗口大小时的图像

另外一件事我在网站上得到了机器人和右边距，我想删除它，但我找不到它的来源。

这是我的HTML：

<!DOCKTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title>WebHosting</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
    <body>
        <!--NavBar-->
        <div class="row">
            <div class="col-lg-8">
                <nav class="navbar navbar-inverse navbar-fixed-top">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="index.html">WebHosting</a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="contactos.html">Contactos</a></li>
                                <li><a href="preços.html">Preços</a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div><!--NavBar END-->
        <!--<div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8"></div>
            <div class="col-xs-6 col-md-4"></div>
        </div>-->
        <section class="jumbotron">
            <div class="container">
                <div class="row text-center">
                    <h1>WebHosting</h1>
                    <p>Host your WebSite now!!</p>
                    <p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
                </div>
            </div>
        </section>
        <!--<div class="row">
            <div class="col-md-6">

            </div>
            <div class="col-md-6">

            </div>
        </div>-->
    </body>
</html>

和CSS：

body { 
}
.jumbotron{
    align-items:center;
    display:flex;
    background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
    background-size:cover;
    background-color:#898888;
    height:500px;
    color:white;
}

Answer 1

您可以使用viewport个单位来获取它。

＆＃13;

body {
   margin:0;
   padding:0;
}

.jumbotron {
  align-items: center;
  display: flex;
  background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
  background-size: cover;
  background-color: #898888;
  height: 50vh; /* Add this */
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>WebHosting</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>
  <!--NavBar-->
  <div class="row">
    <div class="col-lg-8">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
            <a class="navbar-brand" href="index.html">WebHosting</a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="contactos.html">Contactos</a></li>
              <li><a href="preços.html">Preços</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  </div>
  <!--NavBar END-->
  <!--<div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8"></div>
            <div class="col-xs-6 col-md-4"></div>
        </div>-->
  <section class="jumbotron">
    <div class="container">
      <div class="row text-center">
        <h1>WebHosting</h1>
        <p>Host your WebSite now!!</p>
        <p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
      </div>
    </div>
  </section>
  <!--<div class="row">
            <div class="col-md-6">

            </div>
            <div class="col-md-6">

            </div>
        </div>-->
</body>

</html>

＆＃13;

Answer 2

塞缪尔，你可以使用

.jumbotron{
    align-items:center;
    display:flex;
    background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
    background-size:cover;
    background-position: top; /* position at the top */
    background-repeat: no-repeat;
    background-color:#898888;
    min-height: 20em; /* height in relative units */ 
    color:white;
}

Bootstrap网站jumbotron图像缩放

2 个答案: