【轮播图中的背景图片和文字如何实现自适应 _自适应 _轮播】

轮播图中的背景图片和文字如何实现自适应

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

自适应轮播

详细描述

截图

代码

html：
<div id="demo" class="carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img8/cover1.png">
                    <div class="carousel-caption">
                        <p>你作为一个初级菜鸟，你是否想要了解</p>
                        <p>50万的程序员，都会哪些技能呢？</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img8/cover1.png">
                    <div class="carousel-caption">
                        <p>你作为一个初级菜鸟，你是否想要了解</p>
                        <p>50万的程序员，都会哪些技能呢？</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img8/cover1.png">
                    <div class="carousel-caption">
                        <p>你作为一个初级菜鸟，你是否想要了解</p>
                        <p>50万的程序员，都会哪些技能呢？</p>
                    </div>
                </div>
            </div>
            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>

        </div>

css部分
.carousel img{
    width: 100%;
}
.carousel-indicators li {
    width: .1rem !important;
    height: .1rem !important;
    border-radius: 50%;
}
.carousel-caption p{
    font-size: .4rem;
}

编辑于2024-11-20