时间戳

首页 > 解决方案 > 如何在轮播Bootstrap中通过高度居中图像

html - 如何在轮播Bootstrap中通过高度居中图像

问题描述

您好，我是这个伟大社区的新手，而且编码人员非常不专业
，我有一个问题，我希望我拥有的轮播中的图像以高度为中心。
旋转木马的图像更大，我只想将它们居中以显示照片的最佳部分，而不仅仅是上部。
我的轮播：example1
我想怎么看（不透明部分是图像的其余部分）：example2
我希望我自己解释一下。
这是一些代码
HTML

    <!--Carousel Wrapper-->
<div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-home" data-slide-to="1"></li>
        <li data-target="#carousel-home" data-slide-to="2"></li>
    </ol>
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view">
                <img class="d-block w-100 mx-auto" src="imgs/slider/1.png" alt="First slide">
            </div>
            <div class="carousel-caption">
                <h3>Light mask</h3>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100 mx-auto" src="imgs/slider/2.png" alt="Second slide">
            <div class="carousel-caption">
                <h3>Strong mask</h3>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100 mx-auto" src="imgs/slider/3.png" alt="Third slide">
            <div class="carousel-caption">
                <h3>Slight mask</h3>
            </div>
        </div>
    </div>
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-home" 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="#carousel-home" 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 
{ 
width:100%; 
max-height:350px; 
}
.carousel-caption 
{
    text-align: center;
    bottom: 70%;
}

标签： htmlcssbootstrap-4

解决方案

为了object-fit: cover工作，你需要有width: 100%和height: 100%形象。

也放在overflow: hidden图像的父级上，它应该可以工作。object-fit如果图像没有width并height设置为它，则属性将不起作用。

max-width如果您只设置和图像，它将不起作用max-height，因此请记住这一点

推荐阅读