时间戳

首页 > 解决方案 > 如何使图像适合轮播？

css - 如何使图像适合轮播？

问题描述

我有一个固定大小的轮播（例如，宽度 = 800 像素，高度 = 450 像素）。但我的图像有不同的纵横比（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;
}

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

标签： cssbootstrap-4

解决方案

以下对我有用。它将用您的照片覆盖整个 div，但这意味着照片将被放大到需要的程度。所以它必须从照片中隐藏一些（可能是关键的）部分。

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

否则，如果您可以object-fit: contain;改用，则始终将整张照片显示到您的度量中。

推荐阅读