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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Django返回json数据用法示例
2016/09/18 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
建筑专业自荐信
2013/10/18 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python