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 相关文章推荐
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
js编写三级联动简单案例
Dec 21 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
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和ACCESS写聊天室(三)
2006/10/09 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
php猜单词游戏
2015/09/29 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
js 数组详细操作方法及解析合集
2018/06/01 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
Linux文件系统类型
2012/09/16 面试题
园艺师求职信
2014/03/10 职场文书
励志演讲稿600字
2014/08/21 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
八年级作文之友情
2019/11/25 职场文书