Bootstrap轮播图实现与优化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/100005973

本文介绍了在Bootstrap中如何处理因图片超宽导致的界面缩放问题。提出了两种解决方案：一是通过背景图和`background-position: center center;`实现居中显示；二是使用img元素绝对定位配合`left: 50%, margin-left: -width/2`。同时，详细讨论了使用背景图时`background-size`属性的应用，包括长度、百分比和`cover`模式，以确保图片在不同屏幕尺寸下保持恰当的展示效果。" 128059521,8065640,FreeCAD二次开发：创建Python工作台与菜单栏,"['FreeCAD二次开发', 'CAD编程', 'Python编程', 'QT界面']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本的轮播图实现

<!--
以下容器就是整个轮播图组件的整体，
注意该盒子必须加上class="carousel slide" data-ride="carousel"表示当前是一个轮播图
bootstrap.js会自动为当前元素添加图片轮播特效
-->
<div id="轮播图的id" class="carousel slide" data-ride="carousel">
    <!--ol标签是图片轮播的控制点-->
    <ol class="carousel-indicators">
        <!--
        每个li就是一个单独控制点
        data-target属性就是指定当前控制点控制的是哪个轮播图，其目的是如果界面上有多个轮播图
        data-slide-to属性是指当前li元素绑定的是第几个轮播项
        注意：默认必须给其中某个li加上active，展示的时候就是焦点项目
        -->
        <li data-target="#轮播图的id" data-slide-to="0" class="active"></li>
        <li data-target="#轮播图的id" data-slide-to="1"></li>
        <!--…更多的-->
    </ol>
    <!--
        .carousel-inner是所有轮播项的容器盒子，
        注意，role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
    -->
    <div class="carousel-inner" role="listbox">
        <!--每个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点-->
        <div class="item active">
            <!--轮播项目中展示的图片-->
            <img src="example.jpg" alt="示例图片">
            <div class="carousel-caption">
                <!--标题或说明性文字，如果不需要，直接删除当前div.carousel-caption-->
            </div>
        </div>
        <div class="item">
            <!--...-->
        </div>
        <!--...-->
    </div>
    <!--图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张-->
    <!--此处需要注意，该a链接的href属性必须指向需要控制的轮播图ID-->
    <!--另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反-->
    <a class="left carousel-control" href="#轮播图的id" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一张</span>
    </a>
    <a class="right carousel-control" href="#轮播图的id" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一张</span>
    </a>
</div>

由于轮播图片超宽造成的影响
*美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但我们大多数情况的页面宽度都无法满足这样的图片宽
*而且Bootstrap的样式中默认将图片的max-width设置为100%；
*造成界面图片缩放
*想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示，有两种办法：
（1）换用背景图的方式，background-position: center center;
（2）使img元素绝对定位，left: 50%, margin-left: -width/2

background使用
将容器的高度固定（410px）
将轮播图改为背景显示
由于可能图片的高度不一定是410px
所以需要设置css3中的background-size

background-size
length
如background-size: 100px 100px, 将背景图固定到多大尺寸
percentage
如background-size: 90% 90%, 以百分比的形式设置背景大小
cover
1.背景图片等比例缩放
2.让背景图相对较小边放大到目标容器大小结束
如：一张100200的背景图放到一个300400的盒子中，最终背景图片的大小是300600
因为背景图的较小边为100，将100放大到目标容器300的高度，放大了3倍，最终结果200400

Bootstrap笔记3