Question

我有一个带有轮播的动态页面。我无法控制图片，因为它们是由用户上传的。有一些准则，但是我不确定它们是否会遵循它们。

因此，在我的开发测试中，我有3张图像：100x100、2800x1500和600x400

我希望轮播显示在页面的中间，并且要及时响应。如果我拥有或多或少的一致图像，我对此没有问题。

...
<div class="carousel-item active">
    <div class="carousel-img">
        <img src="img1.png">
    </div>
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img2.png">
    </div>
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img3.png">
    </div>
</div>
...

当前“ carousel-img”的CSS（我尝试了很多组合，但似乎没有任何效果）

.carousel-img {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.carousel-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

现在，非常大的图像可以按预期工作。调整其垂直大小不超过400像素。问题出在另外两个图像上。最小的像素，其垂直尺寸从100px调整为400px，垂直尺寸最大约为400px，尽管100％，它也不会水平填充。

所以我如何告诉CSS调整图像大小（不改变宽高比）以使用100％的父容器。让我尝试更好地解释一下：如果轮播在<div class="col-md-6">内，则应使用所有宽度，最大应使用400px。

编辑

请接受我的道歉，以使每个人都浪费时间。我的原始代码没有错误。但是转盘之前有一个先前的DIV，内容为：

<div class="row justify-content-center">

我认为这可能没问题，因为它打算将以下DIV居中放置，我不知道为什么，但是此justify-content-center阻止了图像适当调整大小，当我移除它时，轮播内部的图像开始按预期工作。

非常感谢所有愿意提供帮助的人，今天我学到了一些不同的东西。

Answer 1

找到一个有效的代码段in this jsfiddle-这是使用带有指示符in the documentation的轮播和您正在考虑的图像尺寸。

您唯一要做的更改是从HTML中删除carousel-img div，然后更改CSS中的.carousel-img规则集以应用于carousel-item：

...
<div class="carousel-item active">
    <img src="img1.png">
</div>
<div class="carousel-item">
    <img src="img2.png">
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img3.png">
    </div>
</div>
...

和CSS：

.carousel-item {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

还从所有项目中删除了active类，除了第一个项目外，这会导致Bootstrap JS遍历幻灯片出现问题。

从一开始，您就已经有了使用object-fit: cover的先机！

将Bootstrap轮播中的<img/>调整为CSS中的父元素的大小

编辑

1 个答案: