Bootstrap3 图片-响应式图片&图片形状

原创 2017年01月04日 00:49:49

本文是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 中的圆角属性。

这里写图片描述

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

—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

bootstrap基本的CSS样式 图片 响应式工具

1.响应式图片 2.图片形状

Bootstrap响应式图片的进一步处理

最近在做一个项目,首页特别简单 这是半成品,但是刚开始的时候使用图标的时候,遇到过一个较大的问题,接下来与大家分享。 既然是响应式布局,肯定我们的图片必须要有 class="img-respons...

Bootstrap—实现圆角、圆形头像和响应式图片

Bootstrap提供了四种用于类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角; .img-circle:圆形 (IE...

Bootstrap-CSS-按钮-图片-辅助类-响应式

按钮   可作为按钮使用的标签或元素 为 、 或 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。 虽然按钮类可以应用到 和 元素上,但是,导...

Bootstrap笔记2—禁止响应、清除浮动、图片响应式、媒体查询

1.禁止响应式1.移除头标签里的下面这行meta标签2.,class="container"改为id或其他类名并添加宽度#container { width: 960px; margi...

Css3处理响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变...
  • mingkr
  • mingkr
  • 2014年06月29日 21:05
  • 347

【响应式Web设计】读书笔记 - 弹性布局与响应式图片(一) - 3

【简介】一开始设计网页的时候,网站的宽度都以百分比形式定义。百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化,即弹性布局。后来,又回到了固定宽度设计的风潮,因为固定宽度可以有「像素级精度设计」...

jQuery响应式图片无缝轮播插件1

  • 2017年05月02日 10:14
  • 301KB
  • 下载

图片轮播插件-基于HTML5+CSS3+JavaSript的响应式图片轮播

考虑到不久后的混合开发要用(跑移动端,效率是个问题),先写个插件吧 这是基于HTML5 + CSS3 和原生JavaScript的无缝轮播(左近右出); 因为是在android上开发,所以只定义了...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap3 图片-响应式图片&图片形状
举报原因:
原因补充:

(最多只允许输入30个字)