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—实现圆角、圆形头像和响应式图片

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

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

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

bootstrap下实现轮播图的响应式

bootstrap下实现轮播图的响应式重要的是思想,其实很简单,因为bootstrap是支持栅格布局的,而恰好栅格布局是响应式的主要布局,所以我们可以把轮播图放入栅格布局中,先来一个大的栅格布局,分三...
  • s740556472
  • s740556472
  • 2017年01月27日 13:17
  • 1435

2017.1.08用bootstrap构造响应式轮播图

要求:利用bootstrap中的carousel插件创建一个响应式轮播图,轮播图要求是:1、当屏幕为大屏幕时让轮播图中的图片大小为2000px*410px大小,当屏幕宽度小于768px时,轮播图中的图...
  • fredaouyang
  • fredaouyang
  • 2017年01月08日 16:53
  • 676

bootstrap 让文字显示在响应式图片上

在这个位置折腾了一会,半天没有出效果。 有两种办法:1)让图片做为背景,文字直接布局在图片上; 2)让图片用img标签插入,文字相对布局在图片上; 先说说第一种办法的问题,要想让背景图片完全显示出来,...
  • elie_yang
  • elie_yang
  • 2017年11月01日 21:53
  • 496

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

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

bootstrap 图片上传实例

html: 上传
  • Primary_wind
  • Primary_wind
  • 2014年11月25日 20:00
  • 38001

bootstrap——css样式(五、按钮和图片)

1、预定义样式的按钮 bootstrap为我们设计了一些按钮样式Default Primary
  • zaichuanguanshui
  • zaichuanguanshui
  • 2017年01月18日 15:57
  • 614

bootstrap 基础知识学习(图片+网格系统)

七、图片(306行~335行) 基本样式 1、img-responsive:响应式图片,主要针对于响应式设计 2、img-rounded:圆角图片 3、img-circle:圆形图片 ...
  • wangjiaohome
  • wangjiaohome
  • 2015年07月13日 12:00
  • 2870

bootstrap(手风琴、图片轮换和固定定位)

手风琴(Collapse) Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对应的内容显示或隐藏 ...
  • qq_20261343
  • qq_20261343
  • 2015年08月05日 21:12
  • 2280
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap3 图片-响应式图片&图片形状
举报原因:
原因补充:

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