Bootstrap3 圖片（響應(yīng)式圖片&圖片形狀）
更新時間：2017年01月04日 08:44:13 作者：杜瑞祺
這篇文章主要介紹了 Bootstrap3 圖片 響應(yīng)式圖片和圖片形狀的相關(guān)資料,需非常不錯，具有參考借鑒價值，需要的朋友可以參考下
本文是Bootstrap3基礎(chǔ)系列教程，最后一篇文章，后面還會在寫進階的文章，加個關(guān)注吧，還會有好的文章奉獻而來的。
響應(yīng)式圖片
在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。其實質(zhì)是為圖片設(shè)置了 max-width: 100%; 和 height: auto; 屬性，從而讓圖片在其父元素中更好的縮放。
SVG 圖像和 IE 8-10
在 Internet Explorer 8-10 中，設(shè)置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個問題，在出問題的地方添加 width: 100% \9; 即可。Bootstrap 并沒有自動為所有圖像元素設(shè)置這一屬性，因為這會導(dǎo)致其他圖像格式出現(xiàn)錯亂。
<img src="..." class="img-responsive" alt="Responsive image">
圖片形狀
通過為 元素添加以下相應(yīng)的類，可以讓圖片呈現(xiàn)不同的形狀。
跨瀏覽器兼容性
請時刻牢記：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)式圖片&圖片形狀），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js 事件小結(jié) 表格區(qū)別...2007-08-08
這篇文章主要介紹了JS實現(xiàn)的簡單拖拽功能,涉及javascript鼠標事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
JavaScript利用Canvas實現(xiàn)粒子動畫倒計時
粒子動畫就是頁面上通過發(fā)射許多微小粒子來表示不規(guī)則模糊物體。本文將利用canvas實現(xiàn)酷炫的粒子動畫倒計時，感興趣的小伙伴可以嘗試一下2022-12-12
本文以京東搜索框為例給大家淺析search 搜索框的寫法，本文介紹的非常不錯，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了微信小程序彈窗禁止頁面滾動的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
JavaScript Event學(xué)習(xí)第五章 高級事件注冊模型
在這一章我會講解兩種高級時間注冊模型：W3C和微軟的。因為這兩個方法都不能跨瀏覽器，所以在現(xiàn)在看來他們的使用場合并不多。2010-02-02
JavaScript實現(xiàn)淺拷貝與深拷貝的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)淺拷貝與深拷貝的方法,結(jié)合實例形式總結(jié)分析了JavaScript淺拷貝與深拷貝的定義與使用方法,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)旋轉(zhuǎn)大風(fēng)車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家介紹了TypeScript的基礎(chǔ)類型，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
小程序自定義單頁面、全局導(dǎo)航欄的實現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁面、全局導(dǎo)航欄的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03