【Web前端】【疑难杂症】轮播图图片自适应显示问题(bootstrap3轮播图)

简介: 切换的时候其实是div之间的切换所以我可不可以去掉img呢?图片显示的话,就给div设置背景。

关键代码

html

<!--    轮播图开始-->
    <div id="header" class="carousel slide">
        <!-- 轮播(Carousel)指标 -->
        <ol class="carousel-indicators">
            <li data-target="#header" data-slide-to="0" class="active"></li>
            <li data-target="#header" data-slide-to="1"></li>
            <li data-target="#header" data-slide-to="2"></li>
        </ol>
        <div id="" class="carousel slide">
            <!-- 轮播(Carousel)指标 -->
            <ol class="carousel-indicators">
                <li data-target="#header" data-slide-to="0" class="active"></li>
                <li data-target="#header" data-slide-to="1"></li>
                <li data-target="#header" data-slide-to="2"></li>
            </ol>
            <!-- 轮播(Carousel)项目 -->
            <div class="carousel-inner">
                <div class="item bg1 active">
<!--                    <img src="/img/1.jpg" alt="1">-->
                </div>
                <div class="item bg2">
<!--                    <img src="/img/2.png" alt="2">-->
                </div>
                <div class="item bg3">
<!--                    <img src="/img/3.png" alt="3">-->
                </div>
            </div>
            <!-- 轮播(Carousel)导航 -->
            <a class="left carousel-control" href="#header" 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="#header" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">下一条</span>
            </a>
        </div>
<!--    轮播图结束-->
</div>

css

#header .item{
    width:100%;
    height: 20em;
    min-height:100px;
    max-height:500px;
}
#header .bg1{
    background: url("/img/1.jpg") no-repeat center fixed;
    background-size: cover;
}
#header .bg2{
    background: url("/img/2.png") no-repeat center fixed;
    background-size: cover;
}
#header .bg3{
    background: url("/img/3.png") no-repeat center fixed;
    background-size: cover;
}

效果图

问题分析

情况说明

我的轮播图要插入的图片,有一张比较特殊,没错,就是2号图,他是竖屏的。

而我正在使用Bootstrap3(作业要求)制作轮播图。

如果不做调整的话,轮播图到2号时,轮播图区域高度会增加,然后到3号,高度又减小……

我想要的效果是:

1.图片铺满轮播图的框框

2.图片高度统一

方法探索

我很自然想到了css设置背景的方法:

background: url("url") no-repeat center fixed;

但是现在用的是img,我应该怎么去设置img呢?似乎不太方便。

如你所见,3张图分别在3个div里面

切换的时候其实是div之间的切换

所以我可不可以去掉img呢?图片显示的话,就给div设置背景。

于是有了这些:

#header .item{
    width:100%;
    height: 20em;
    min-height:100px;
    max-height:500px;
}
#header .bg1{
    background: url("/img/1.jpg") no-repeat center fixed;
}
#header .bg2{
    background: url("/img/2.png") no-repeat center fixed;
}
#header .bg3{
    background: url("/img/3.png") no-repeat center fixed;
}

但是有个问题,这个图片他没有铺满。而我想要他铺满,且不能变形。

所以考虑设置background-size

#header .bg1{
    background: url("/img/1.jpg") no-repeat center fixed;
    background-size: cover;
}
#header .bg2{
    background: url("/img/2.png") no-repeat center fixed;
    background-size: cover;
}
#header .bg3{
    background: url("/img/3.png") no-repeat center fixed;
    background-size: cover;
}

为什么我写是cover而不是100%呢?

从我自己测试来看,设置100%的话,宽度是100%,高度容易出现空白区域。

cover的效果来看:cover能让背景图“紧贴”“盒子”边缘

下面是菜鸟教程上的说明:

cover会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

好,最终就得到了这套解决方案。

或许会有更好的办法的。欢迎留言讨论。

相关文章
|
2天前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。
|
11天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
10天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
15 2
|
13天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
13天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
27天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
30 11
|
21天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
27天前
|
前端开发
|
27天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
1天前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
10 0