Bootstarp轮播图关于尺寸的问题

为了响应移动端，为了偷个懒，就选择了一个可以自适应的框架Bootstarp
去菜鸟上直接做个CV战士

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol>   <!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active"><img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"><div class="carousel-caption">标题 1</div></div><div class="item"><img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"><div class="carousel-caption">标题 2</div></div><div class="item"><img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"><div class="carousel-caption">标题 3</div></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div> </body>
</html>

然后问题就开始出现了：

图片和bootstarpd图片展示的框和预想的不一样啊，并不能完全的填充满，
于是翻阅大量的文档测试
有的说把图片变成背景图通过css3的background-size的属性把容器塞满，嗯也算实现了，但是却造成了渲染性的问题，每一个图片轮播的时候先展现小图然后在填充满，这样的样式要提交了目测会被老板打死。
真是在写bug的路上渐行渐远了

有的说寻找外框添加css属性，测试了或许因为项目不同没有成功

真是苦思冥想一番啊，为什么要动原生框架啊，动图片不就行了吗，于是直接测试上图，别说还真好了直接上代码

<div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li></ol>   <!-- 轮播（Carousel）项目 --><div class="carousel-inner" role="listbox"><div class="item active"><img src="data:image/mmexport1611600229052.jpg" class="img-responsive" alt="#" style="width: 100%;"><div class="carousel-caption"></div></div><div class="item" role="listbox"><img src="data:image/mmexport1611600232884.jpg" class="img-responsive" alt="#" style="width: 100%;"><div class="carousel-caption"></div></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

稍微做了一点骚操作，把image的css属性winde设置成100%，搞定完美收官

Bootstarp轮播图关于尺寸的问题相关推荐

响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...
Dom轮播图三级联动 Dom常用尺寸
1.Dom轮播图 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
解决bootstrap轮播图因为图片尺寸造成的问题
发现问题在使用bootstrap做轮播图时,由于图片尺寸,使得图片与轮播图结合的效果很差解决方案我们先找到轮播图的相关代码,如下: <div id="carousel ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
前端性能优化之jQuery按需加载轮播图
引言关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
php如何从左往右轮播,js实现从左向右滑动式轮播图效果
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

Bootstarp轮播图关于尺寸的问题

Bootstarp轮播图关于尺寸的问题相关推荐

最新文章

热门文章