问题显示在此 GIF 中：
我正在使用 Bootstrap 5 在卡片中放置一个旋转木马。尽管图像显示正确，但卡片会随着图像的变化而调整大小。我想防止这种情况并为所有图像设置一个恒定的大小。
这是相关的代码：
<div class="col">
<div class="card h-100">
<div class="card-img-top w-100">
<div id="carouselExampleControls" class="carousel slide >
<div class="carousel-inner">
<div class="carousel-item active
<img src="1.png" class="d-block w-100 " alt="..." >
</div>
<div class="carousel-item active
<img src="2.png" class="d-block w-100 " alt="..." >
</div>
<div class="carousel-item active
<img src="3.png" class="d-block w-100 " alt="..." >
</div>
</div>
<Button stuff, not so important...>
</div>
</div>
<div class="card-body">
<h5 class="card-title">a title</h5>
<p class="card-text">Some text.</p>
</div>
<div class="card-footer">
Some Text here.
</div>
</div>
</div>
有任何想法吗？
您想要做的是为图像添加固定的高度或宽度。
在img标签中添加一些 css 。有了它，您可以调整图像的高度并使图像居中。像这样：
.carousel img {
height: 220px;
width: 100%;
object-fit: cover;
object-position: center;
}
这object-fit: cover;使得图像适合并且不会被拉伸。随着object-position: center;它的中心视角的图像。在这种情况下，它将图像以 220 像素的高度居中。
这是一个工作示例：https : //www.codeply.com/p/y86ZKljAZS
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句