使引導輪播中的圖像響應？
[英]Make images in bootstrap carousel responsive?
問題描述
我正在使用引導程序進行旋轉木馬，但無法使圖像響應。 問題是高度遠大於寬度的圖像？ 我測試了另一幅較大的圖像，該圖像失真了。
body { padding-top: 68px !important; background-color: black; }
<!DOCTYPE html> <html lang="en"> <head> <title>Teste</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <nav class="navbar navbar-expand-md fixed-top navbar-dark"> <div class="container"> <a href="index.html" class="navbar-brand"> <img src="#" alt="Logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-content"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link pr-5 nav-active" href="#">TESTE</a></li> <li class="nav-item"><a class="nav-link pr-5" href="#">TESTE</a></li> </ul> </div> </div> </nav> <header class="container-fluid p-0"> <div id="carouselBanner" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <a href="top-movie.html"><img class="d-block w-100" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg" alt="Fight Club"></a> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/yE5d3BUhE8hCnkMUJOo1QDoOGNz.jpg" alt="House"> </div> </div> <a class="carousel-control-prev" href="#carouselBanner" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" ></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselBanner" data-slide="next"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span> </a> </div> </header> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
輪播會占據圖像的整個高度，我試圖降低高度，但是圖像失真了。
1 個解決方案
解決方案1
0 2019-07-21 13:44:31
我試圖在您的CSS上添加一些樣式，
<style>
body {
padding-top: 68px !important;
background-color: black;
}
.carousel-inner {
position: relative;
overflow: hidden;
}
.carousel-item {
position: relative;
width: 100vh;
height: 100vh;
display: none;
width: 100%;
}
.img {
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
</style>
當我最小化它時，它會縮小
引導輪播多個圖像響應窗口調整大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.