Bootstrap3 圖片（響應(yīng)式圖片&圖片形狀）
本文是Bootstrap3基礎(chǔ)系列教程，最后一篇文章，后面還會(huì)在寫進(jìn)階的文章，加個(gè)關(guān)注吧，還會(huì)有好的文章奉獻(xiàn)而來(lái)的。
響應(yīng)式圖片
在 Bootstrap 版本 3 中，通過(guò)為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。其實(shí)質(zhì)是為圖片設(shè)置了 max-width: 100%; 和 height: auto; 屬性，從而讓圖片在其父元素中更好的縮放。
SVG 圖像和 IE 8-10
在 Internet Explorer 8-10 中，設(shè)置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個(gè)問(wèn)題，在出問(wèn)題的地方添加 width: 100% \9; 即可。Bootstrap 并沒(méi)有自動(dòng)為所有圖像元素設(shè)置這一屬性，因?yàn)檫@會(huì)導(dǎo)致其他圖像格式出現(xiàn)錯(cuò)亂。
<img src="..." class="img-responsive" alt="Responsive image">
圖片形狀
通過(guò)為 元素添加以下相應(yīng)的類，可以讓圖片呈現(xiàn)不同的形狀。
跨瀏覽器兼容性
請(qǐng)時(shí)刻牢記：Internet Explorer 8 不支持 CSS3 中的圓角屬性。
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
以上所述是小編給大家介紹的Bootstrap3 圖片（響應(yīng)式圖片&圖片形狀），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
跟我學(xué)Node.js（四）---Node.js的模塊載入方式與機(jī)制
Node.js中模塊可以通過(guò)文件路徑或名字獲取模塊的引用。模塊的引用會(huì)映射到一個(gè)js文件路徑，除非它是一個(gè)Node內(nèi)置模塊。Node的內(nèi)置模塊公開了一些常用的API給開發(fā)者，并且它們?cè)贜ode進(jìn)程開始的時(shí)候就預(yù)加載了。2014-06-06
這篇文章主要是對(duì)JavaScript中的隱式類型轉(zhuǎn)換進(jìn)行了詳細(xì)分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要分享10個(gè)常見的前端手寫功能，防抖、節(jié)流、深拷貝、異步控制并發(fā)數(shù)、繼承等功能技巧，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-02-02
javascript字符串對(duì)象常用api函數(shù)小結(jié)(連接,替換,分割,轉(zhuǎn)換等)
這篇文章主要介紹了javascript字符串對(duì)象常用api函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript常用的連接、替換、分割、轉(zhuǎn)換等相關(guān)函數(shù)與使用方法,需要的朋友可以參考下2016-09-09![怎么在下面的HTML里調(diào)用數(shù)組cs[]的值](http://img.jbzj.com/images/xgimg/bcimg4.png)
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值...2007-01-01
underscore之Chaining_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
本文通過(guò)文字說(shuō)明與代碼的形式給大家介紹了underscore之Chaining的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-07-07
Javascript Memoization 緩存函數(shù)使用說(shuō)明
Memoization 是一種將函數(shù)返回值緩存起來(lái)的方法，學(xué)習(xí)js 面向?qū)ο蟮呐笥芽梢詤⒖枷隆?2010-05-05
JS判斷不同分辨率調(diào)用不同的CSS樣式文件實(shí)現(xiàn)思路及測(cè)試代碼
最近看一個(gè)網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，于是很好奇研究并寫了一個(gè),經(jīng)測(cè)試感覺(jué)還不錯(cuò)，感興趣的你可以來(lái)看看哦2013-01-01
這篇文章主要介紹了懸浮廣告方法日常收集整理的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript編程實(shí)現(xiàn)棧的方法詳解【經(jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了javascript編程實(shí)現(xiàn)棧的方法,簡(jiǎn)單說(shuō)明了棧的概念、特點(diǎn)并結(jié)合實(shí)例形式分析了javascript棧的定義、入棧、出棧等操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04