Bootstrap3 图片(响应式图片&图片形状)


Posted in Javascript onJanuary 04, 2017

本文是Bootstrap3基础系列教程,最后一篇文章,后面还会在写进阶的文章,加个关注吧,还会有好的文章奉献而来的。

响应式图片

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性,从而让图片在其父元素中更好的缩放。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱。

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

通过为  元素添加以下相应的类,可以让图片呈现不同的形状。

跨浏览器兼容性

请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

Bootstrap3 图片(响应式图片&amp;图片形状)

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

以上所述是小编给大家介绍的Bootstrap3 图片(响应式图片&图片形状),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
javascript 注释代码的几种方法总结
Jan 04 #Javascript
JS数组返回去重后数据的方法解析
Jan 03 #Javascript
js实现复选框的全选和取消全选效果
Jan 03 #Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 #Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 #Javascript
原生JS实现在线问卷调查投票特效
Jan 03 #Javascript
详解angular中如何监控dom渲染完毕
Jan 03 #Javascript
You might like
PHP临时文件的安全性分析
2014/07/04 PHP
php编写简单的文章发布程序
2015/06/18 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python之父谈Python的未来形式
2016/07/01 Python
基于python的字节编译详解
2017/09/20 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
pytorch permute维度转换方法
2018/12/14 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
利用Python优雅的登录校园网
2020/10/21 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
大学生水果店创业计划书
2014/01/28 职场文书
活动宣传策划方案
2014/05/23 职场文书
甜品店创业计划书
2014/08/14 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python