Bootstrap3 图片（响应式图片&图片形状）

本文是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">

以上所述是小编给大家介绍的Bootstrap3 图片（响应式图片&图片形状），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap使用file-input插件上传图片的方法

    BootStrap使用file-input插件上传图片的方法

    最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 首先根据自己的项目路径引入插件css和js文件 注意locale语言文件在fileinput.min.js文件之后引入 <!-- file input --> <link href="../../css/fileinput.min.css"

  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

    今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天,后来找到了实现思路,下面小编把我的想法及实现过程分享给大家,有问题欢迎提出,共同学习进步! 实现思路: 实现效果图 自己往里面加入bootstrap的栅格布局代码,控制在不同分辨率下面的排布情况. 这样实现唯一的前提条件就是你的验证码图片高度需要和input框的高度一样(input框

  • Bootstrap中的fileinput 多图片上传及编辑功能

    Bootstrap中的fileinput 多图片上传及编辑功能

    大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input. 逻辑说明:先从后台获取数据展示,然后进行编辑. 废话不多说, 直接上代码. 1. 页面部分代码: <div class="form-group"> <label for="inputEmail3" class="col-xs-3 control-label">

  • Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

    在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car

  • 全面解析多种Bootstrap图片轮播效果

    全面解析多种Bootstrap图片轮播效果

    分享了三种Bootstrap图片轮播效果,相信总有一款你满意的! 第一种效果:Bootstrap简单轮播 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

  • CSS图片响应式 垂直水平居中

    CSS图片响应式 垂直水平居中

    我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

  • 基于jQuery实现响应式圆形图片轮播特效

    基于jQuery实现响应式圆形图片轮播特效

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有: 使用简单 在同一个屏幕中支持多个轮播图 轮播图的内容可以是单张图片或复杂的HTML内容 轻量级 响应式设计 非常容易定制 丰富的回调函数 跨浏览器,支持IE8+浏览器 引入核心文件 mislider插依赖于一些插件,在引入之前要先引入jQuery.html5shiv.j

  • 使用bootstrap3开发响应式网站

    使用bootstrap3开发响应式网站

    本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position:

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

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

    Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角: .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形. .img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框. .img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可

  • Bootstrap3 图片（响应式图片&图片形状）

    Bootstrap3 图片（响应式图片&图片形状）

    本文是Bootstrap3基础系列教程,最后一篇文章,后面还会在写进阶的文章,加个关注吧,还会有好的文章奉献而来的. 响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性,从而让图片在其父元素中更好的缩放. SVG 图像和 IE 8-10 在 Internet Explorer 8-10 中,设置为 .img-responsive

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

  • Bootstrap优化站点资源、响应式图片、传送带使用详解3

    Bootstrap优化站点资源、响应式图片、传送带使用详解3

    优化Bootstrap站点资源.完成Bootstrap响应式图片.让传送带支持手势,具体内容如下 A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点 中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 -- 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件"瘦身",

  • jquery.gridrotator实现响应式图片展示画廊效果

    jquery.gridrotator是一款非常实用的响应式图片展示画廊插件.这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片.共有6种效果. HTML结构: HTML结构非常简单. <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img sr

  • JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

随机推荐