Bootstrap响应式图片

响应式图片

Bootstrap 3 中，通过为图片添加.img-responsive类，可以让图片支持响应式布局。其本质是为图片设置了max-width: 100%;、height: auto;和display: block;属性，从而让图片在其父元素中更好的缩放。如：

<img src="..." class="img-responsive" alt="Responsive image">

如果需要让使用了.img-responsive类的图片水平居中，请使用.center-block类，不要用.text-center类。

在 Internet Explorer 8-10 中，设置为.img-responsive的 SVG 图像会出现长宽比失调。为了解决这个问题，在出问题的地方添加width: 100% \9;即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap响应式图片相关推荐

【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势...
A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片带进度条图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
Bootstrap响应式Web开发(一)
Bootstrap响应式Web开发(一) 目录 Bootstrap响应式Web开发(一) 一.Bootstrap的概念.特点及组成二.浏览器三.Visual Studio Code 四.移动端开发 ...
BootStrap #响应式布局 #组件
响应式布局 1.啥叫响应式:根据浏览器页面的设备不同自动的改变布局图片文本不会影响体验 2.编写响应式的网页: (1)视口<meta name="viewport" ...
Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
通过padding-bottom或者padding-top实现等比缩放响应式图片
之前同事说padding-bottom 可以实现等比缩放响应式图片,当时忙,没有好好看-- 今天特意思考了下,实现的css代码如下: .img-container {position: relativ ...
继续送假期干货——响应式图片工具smartImg
中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...
HTML5 响应式图片
现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...

Bootstrap响应式图片

响应式图片

Bootstrap响应式图片相关推荐

最新文章

热门文章