我正在使用 bootstrap 4 滑塊創建網站頁面，但圖像沒有響應，并且僅在 1980x1080 下看起來不錯。如何使圖像響應？我的代碼看起來像這樣：<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active img-fluid" style="background-image: url(img/slide11.jpg);"> <div class="carousel-caption text-center"> <h1><img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/></h1> <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a> </div> </div> <div class="carousel-item" style="background-image: url(img/HydriveTeam.jpg);"></div> <div class="carousel-item" style="background-image: url(img/HydriveShell.jpg);"></div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a></div>
1 回答
暮色呼如
TA貢獻1853條經驗 獲得超9個贊
由于您將圖像設置為背景，.carousel-item并且這些項目上沒有任何其他內容，因此您應該設置更多屬性才能查看這些圖像。例子：
.carousel-item {
height: 400px; /* set some height*/
/* optionals */
background-repeat: no-repeat;
background-position: cneter;
background-size: 100% 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active img-fluid" style="background-image: url(https://via.placeholder.com/1000x1000?text=First+Slide);">
<div class="carousel-caption text-center">
<img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/>
<a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>
</div>
</div>
<div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Second+Slide);"></div>
<div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Third+Slide);"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
附帶說明：您不能使用圖像作為標題，因此不要將其放置img在h1.
- 1 回答
- 0 關注
- 109 瀏覽
添加回答
舉報
0/150
提交
取消