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 面向对象 function类
May 13 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
Vue精简版风格概述
Jan 30 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
在vue中通过render函数给子组件设置ref操作
Nov 17 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
建立动态的WML站点(二)
2006/10/09 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python绘图实现显示中文
2019/12/04 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
python爬取音频下载的示例代码
2020/10/19 Python
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
大学活动邀请函
2014/01/28 职场文书
2014信息公开实施方案
2014/02/22 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
毕业证代领委托书
2014/09/26 职场文书
校园开放日新闻稿
2015/07/17 职场文书
运动会新闻报道稿
2015/07/22 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
vue打包时去掉所有的console.log
2022/04/10 Vue.js
Golang日志包的使用
2022/04/20 Golang