gpt4 book ai didi

css - 在 jumbotron 中调整图像大小如何?

转载 作者:行者123 更新时间:2023-11-28 04:08:48 27 4
gpt4 key购买 nike

如果有人能好心帮助我,这可能看起来很愚蠢,但我仍在学习 Bootstrap 和一般编码。我想在超大屏幕中填充我的图像,但如果你看一下我的图像,它并没有填满整个超大屏幕,不仅如此,我还想让它变小一点

<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;
}

最佳答案

background-size 属性仅适用于通过 CSS 作为 background-image 添加的图像。作为引用,您可以阅读 background images herebackground 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">

希望对您有所帮助。

关于css - 在 jumbotron 中调整图像大小如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42823014/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com