如何解决如何将肖像图像与横向旋转图像一起放入引导轮播？
我有一个带有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>解决方法
如果将图像作为背景图像而不是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" 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>
这是在Windows 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>
我已经将第二张图片居中，没有使用
.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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
