Question

如果有人能够帮助我，那可能看起来很愚蠢，但我仍在用引导程序学习东西，而且只是编码。我想在jumbotron中填充我的图像，但如果你看一下我的图像，它不会填满整个jumbotron，不仅如此，我还想让它变小一点

<body>
      <div class="container" id="header">
        <div class="row">
          <div class="col-md-12">
                  <ul class="nav justify-content-end p-4">
                    <li class="nav-item">
                      <a class="nav-link active" href="#">HOME</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">THE ASAP ADVANTAGE</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">HOW IT WORKS</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">FAQS</a>
                    </li>
                  </ul>
          </div>
        </div>
      </div>

      <div class="jumbotron">
            <img src="heroimage.jpeg" class="img-fluid" alt="Responsive image" id="heroPic">
     </div>

--- css代码是---

#header{
background-color: #004157;
height:120px;
width:100%;

}

#heroPic{
    opacity: .5;
    background-size: cover;
    padding:0;
    margin:0;
}

Answer 1

background-size属性仅适用于通过CSS添加为background-image的图片。作为参考，您可以阅读background images here和background sizing here。

基本上，如果您想将图像添加为背景，您可以执行以下操作：

#heroPic{
    opacity: .5;
    background: url('heroimage.jpeg') center center no-repeat;
    background-size: cover;
    padding:0;
    margin:0;
}

然后在HTML中你需要删除这一行：

<img src="heroimage.jpeg" class="img-fluid" alt="Responsive image" id="heroPic">

希望有所帮助。

在jumbotron中调整图像大小如何？

1 个答案: