Html 如何使图像占据整个空间？

我正在制作一个网站，我想在标题部分给出一个图片。这是我在HTML文件中的代码

<header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8 col-md-12">
                    <h1>Tourister</h1>
                    <p style="padding:40px"></p>
                    <p>We take inspiration from the World's best 
                        touring experiences, and create a unique experience. You will surely be surprised by our amazing offers and deals we
                        provide throughout the year !
                    </p>
                </div>
            </div>
        </div>
</header>

现在的问题是，我的图像并没有像下面的图像那样占据整个巨型运输车的高度和宽度。

我希望它占据整个空间。我使用过不同大小的图像，但它没有用。没有一个占据了整个窗口的空间。 因此，任何帮助都将不胜感激。提前感谢

注意：我读过其他一些关于图像在堆栈溢出中没有占据整个宽度但无法使其工作的问题。

试试看

.jumbotron {
background-image: url("../img/image6.jpg");
color: white;
background-attachment:fixed;
min-height:400px;
margin-top:0px;
margin-bottom:8px; }

试试这个

.jumbotron {
background-image: url("../img/image6.jpg");
color: white;
background-attachment:fixed;
min-height:400px;
margin-top:0px;
margin-bottom:8px; }

---

您要查找的属性是

背景大小

将此添加到您的代码中

.jumbotron {
  ...
  background-size: cover; /* Can also be "contain" */
  ...
}

---

您要查找的属性是

背景大小

将此添加到您的代码中

.jumbotron {
  ...
  background-size: cover; /* Can also be "contain" */
  ...
}

---

注意：我不完全确定您是否希望将类（或者可以是一个ID）应用于头，而不是较小的div之一。可能取决于你还有什么要做

.jumbotron 
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}

---

看看其他答案：这还取决于你的图像特征和你喜欢的显示方式。掩护！=100%x100%！=包含请参阅。

注意：我不完全确定您是否希望将类（或者可以是ID）应用于标头，而不是应用于较小的div之一。可能取决于你还有什么要做

.jumbotron 
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}

---

看看其他答案：这还取决于你的图像特征和你喜欢的显示方式。掩护！=100%x100%！=包含请参阅。

您需要在

.jumbotron

类中将

背景尺寸：cover

添加到CSS中。这将确保背景图像始终是元素的完整大小，而不会扭曲纵横比。

您需要在

.jumbotron

类中将

背景大小：cover

添加到CSS中。这将确保背景图像始终是元素的完整大小，而不会扭曲纵横比。

将

背景大小

属性

封面

添加到jumbotron中

.jumbotron{
  background-size: cover;
 }

---

将

背景尺寸

属性

封面

添加到jumbotron

.jumbotron{
  background-size: cover;
 }

contain

将留下空间，除非图像的纵横比与

div

相同

---

contain

将留下空间，除非图像的纵横比与

div

相同。您可以使用css属性： 背景尺寸：封面

见：

---

和

您可以使用css属性： 背景尺寸：封面

见：

---

我尝试了你的代码，使用563KB大小的图像，效果很好。你应该使用大尺寸图像，或者使用

   background-size:cover; in your css

---

我尝试了你的代码，使用563KB大小的图像，你的工作做得很好。你应该使用大尺寸图像，或者使用

   background-size:cover; in your css

---

这将只是修复背景图像，而不是拉伸图像以填充背景。抱歉。但是图像开始重复自身。这将只是修复背景图像，而不是拉伸图像以填充背景。抱歉。但是图像开始重复自身。好的。有一件事你最后一行的含义是什么？覆盖率不等于100%？你能解释一下吗？尝试一下链接的Try It thing（尝试它的东西）-很容易看出填充空间的不同方式之间的区别，而不是解释它-但是100%x100%会扭曲图像以完全填充，“封面”会保留图像比例（实际上是裁剪图像），但填充整个空间，“包含”将保留比例并按高度或宽度填充（如果空间比例不变且与图像相同，则可能=100%x100%）好的。最后一行的含义是什么？封面不等于100%？你能解释一下吗？尝试一下链接的Try It thing（尝试它的东西）-很容易看出填充空间的不同方式之间的区别，而不是解释它-但是100%x100%会扭曲图像以完全填充，“封面”会保留图像比例（实际上是裁剪图像），但填充整个空间，“包含”将保留比例并按高度或宽度填充（如果空间比例不变且与图像相同，则可能=100%x100%）