img-responsive

?編輯

本詞條缺少概述圖，補(bǔ)充相關(guān)內(nèi)容使詞條更完整，還能快速升級(jí)，趕緊來(lái)編輯吧！

img-responsive是圖片響應(yīng)式的意思，在Bootstrap框架中，有一個(gè).img-responsive的CSS樣式。應(yīng)用這個(gè)樣式以后，圖片就會(huì)變成響應(yīng)式圖片。

中文名

圖片響應(yīng)式

外文名

img responsive

常????見(jiàn)

Bootstrap中內(nèi)置樣式

目錄

1?介紹

2?用法

3?居中

介紹

編輯

img-responsive是圖片響應(yīng)式的意思，在Bootstrap框架中，有一個(gè).img-responsive的CSS樣式。應(yīng)用這個(gè)樣式以后，圖片就會(huì)變成響應(yīng)式圖片。

用法

編輯

在BootStrap中，給<img>添加 .img-responsive樣式就可以實(shí)現(xiàn)圖片響應(yīng)式。

1	<img?src="..."?class="img-responsive">

居中

編輯

我們?cè)谟胋ootstrap排版內(nèi)容的時(shí)候，有的時(shí)候在內(nèi)容中需要圖片水平居中對(duì)齊?[1]??。

一般情況下，我們的圖片都使用了 .img-responsive 類來(lái)實(shí)現(xiàn)響應(yīng)式圖片。如果需要實(shí)現(xiàn)響應(yīng)式圖片水平居中，那么我們要使用 .center-block 類，不要用 .text-center

1	<p><img?class="img-responsive?center-block"?src="..."?/></p>

參考資料

• 1.??Bootstrap中如何讓響應(yīng)式圖片（img-responsive）水平居中???．天辰的博客．2015-12-17[引用日期2016-09-30]

總結(jié)

以上是生活随笔為你收集整理的图片响应式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。