如何將肖像圖像放入帶有風景圖像的引導輪播中？
[英]How to fit portrait image into bootstrap carousel with landscape ones?
問題描述
我有一個帶有 2 個橫向（寬度大於高度）和 1 個縱向（高度大於寬度）圖像的引導輪播示例。 由於人像比其他人高，因此會導致像下面這樣的溢出
風景一
人像一
我希望那個肖像像下面這樣（像其他容器一樣裝入容器並居中） 因此，除了我的輪播工作響應
.carousel-inner img {
width: 100%;
height: 100%;
}
需要
<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */.carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <div id="demo" class="carousel slide" data-ride="carousel"> <:-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <.-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https.//lh3:googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="https.//i.pinimg:com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago"> </div> <div class="carousel-item"> <img src="https.//encrypted-tbn0?gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html>
2 個解決方案
解決方案1
0 2020-09-20 20:34:48
如果您將圖像作為背景圖像而不是 img 放入其包含的 div 中，系統將自動調整大小和 position 的大小，以便它們適合您的需要 - 如果用戶調整 window 的大小，圖像將相應地調整大小（此時圖像得到如果 window 變窄，則“壓扁”）。
包含圖像的 div 的 CSS 可以添加：
div.carousel-item {
background-size: contain;
background-position: center center;
background-repeat: no-repeat no-repeat;
width: 100%;
height: 100%;
}
還有這個
<div class="carousel-item">
<img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
</div>
成為
<div class="carousel-item" style="background-image="url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);">
</div>
這是在我的 Window 10 筆記本電腦上運行的完整代碼：
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.carousel-item {
background-size:contain;
background-position:center center;
background-repeat:no-repeat no-repeat;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url(https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym);" alt="Los Angeles">
</div>
<div class="carousel-item" style="background-image:url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);" alt="Chicago">
</div>
<div class="carousel-item" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU);" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
解決方案2
0 2020-09-20 21:16:53
我已將第二張圖像居中而不使用縮放
.mx-auto.d-block引導類
對於另外兩張圖片，我做了全尺寸
using `.w-100 class` & `height:100vh`
這里的高度是你需要的狂歡高度。
這是我從您要求的 output 中了解到的。
.carousel-inner img { width: auto; height: 100vh; }.carousel { height: 100vh; width: 100vw; } <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="carousel slide bg-dark" id="mine" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#mine" data-slide-to="0" class="active"></li> <li data-target="#mine" data-slide-to="1"></li> <li data-target="#mine" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" class="img-fluid w-100"> </div> <div class="carousel-item"> <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg " class="img-fluid mx-auto d-block"> </div> <div class="carousel-item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" class="img-fluid w-100"> </div> </div> <a class="carousel-control-next" href="#mine" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <a class="carousel-control-prev" href="#mine" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> </div> </body> </html>
我建議 go 將所有圖像作為第二個居中。 因為拉伸看起來不太好
.carousel-inner img { width: auto; height: 100vh; }.carousel { height: 100vh; width: 100vw; }
<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="carousel slide" id="mine" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#mine" data-slide-to="0" class="active"></li> <li data-target="#mine" data-slide-to="1"></li> <li data-target="#mine" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" class="img-fluid mx-auto d-block"> </div> <div class="carousel-item"> <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg " class="img-fluid mx-auto d-block"> </div> <div class="carousel-item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" class="img-fluid mx-auto d-block"> </div> </div> <a class="carousel-control-next" href="#mine" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <a class="carousel-control-prev" href="#mine" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> </div> </body> </html>
如何調整小型設備的引導模式（橫向和縱向）
[英]How to resize bootstrap modal for small devices (for landscape and portrait orientations)
如何在 Mobile View 上更改 Bootstrap Carousel 的圖像？
[英]How to change Image of Bootstrap Carousel on Mobile View?
當旋轉木馬中的圖像為1365 x 415像素時，如何在17英寸或更多屏幕上安裝旋轉木馬圖像？
[英]How to fit carousel image on 17'' screens or more when the image in carousel are 1365 x 415 px?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.