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 event事件的传递与冒泡处理
Dec 06 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
分析javascript原型及原型链
Mar 18 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
javascript自定义加载loading效果
Sep 15 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python制作websocket服务器实例分享
2016/11/20 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
简单的辞职信范文
2014/01/18 职场文书
三年级科学教学反思
2014/01/29 职场文书
数学系个人求职信范文
2014/01/30 职场文书
酒鬼酒广告词
2014/03/21 职场文书
党员公开承诺书内容
2014/05/20 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
一般纳税人申请报告
2015/05/18 职场文书
python实现网络五子棋
2021/04/11 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js