Question

我有一个固定大小的轮播（例如，宽度= 800px，高度= 450px）。但是我的图像具有不同的宽高比（16：9、16：10、1：1等）和大小，大于轮播的大小。我正在尝试使所有图像减小其尺寸以适合我的轮播。

轮播代码是：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="carousel-img" src="{{ last_post.image.url }}"
                             alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="carousel-img"
                             src="{{ second_last_post.image.url }}" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="carousel-img" src="{{ third_last_post.image.url }}"
                             alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

CSS：

.carousel-inner {
    height: 450px;
    width: 800px;
}

如何调整图像大小以适合轮播？

Answer 1

以下对我有用。它会用您的照片覆盖整个div，但这意味着将根据需要进行放大。因此它必须在照片中隐藏一些（也许很关键）部分。

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

否则，如果您可以改用object-fit: contain;，则始终将整张照片显示在小节中。

如何使图像适合旋转木马？

1 个答案: