如何将纵向图像放入带有横向图像的引导轮播？
Posted
技术标签:
【中文标题】如何将纵向图像放入带有横向图像的引导轮播？【英文标题】：How to fit portrait image into bootstrap carousel with landscape ones? 【发布时间】：2021-01-07 00:14:07 【问题描述】：我有一个引导轮播示例，其中包含 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" >
</div>
<div class="carousel-item">
<img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" >
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" >
</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>【问题讨论】：
【参考方案1】：如果您将图像作为背景图像而不是 img 放置到其包含的 div 中，系统将自动调整大小和位置，以便它们适合您 - 如果用户调整窗口大小，图像将相应调整大小（目前如果窗口变窄，图像会被“压扁”）。
包含图像的 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" >
</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);" >
</div>
<div class="carousel-item" style="background-image:url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);" >
</div>
<div class="carousel-item" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU);" >
</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>
【讨论】：
那么，这怎么可能是答案？建议可以放在 cmets 中 @Sandrin Joy 很抱歉，我不明白您的评论。如果我显示的更改是按照要求的问题进行的轮播工作 - 肖像图像不会溢出和居中。 我应用了你的更改但没有用。你能想出小提琴吗？ 我已将完整的代码放在答案的末尾。它在我的 Windows10 笔记本电脑上运行。我也会在其他一些设备上试试。您使用的是什么浏览器/系统 - 我会尝试找出任何问题。 我也把代码放在了我的网站上——让我知道它是否适合你。它位于 [链接]ahweb.org.uk/testslider.html【参考方案2】：我已将第二张图像居中而不使用缩放
.mx-auto .d-block 引导类
对于其他 2 张图片，我做了全尺寸
using `.w-100 class` & `height:100vh`
这里的高度是您需要的旋转高度。
这是我从您所需的输出中了解到的。
.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>我建议将所有图像作为第二张居中。因为拉伸看起来不太好
.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>【讨论】：
但我建议让所有图像都像第二张一样居中，并使左侧部分透明，因为拉伸看起来永远不会很好。 不幸的是，如果窗口大小不是图像的初始纵横比，这会“挤压”图像。例如，黄色的汽车在小sn-p窗口上看起来太长太瘦了。这意味着，例如，如果用户更改浏览器上的窗口大小，则图像会失真（这是 background-image 与 img 元素相反的好处 - 系统会自动为您调整大小以使滑块在所有设备上响应. @AHaworth 查看评论 这在视口处于横向模式时有效，但在纵向时图像会被“挤压”（例如，如果用户正在使用手机）。对于这个特定的问题，这可能重要也可能不重要，但如果一个人试图拥有一个完全响应的网站，这很重要。以上是关于如何将纵向图像放入带有横向图像的引导轮播？的主要内容，如果未能解决你的问题，请参考以下文章