文章插圖
響應(yīng)式圖片如何響應(yīng)？
Bootstrap框架來制作響應(yīng)式網(wǎng)站（或稱之為響應(yīng)式網(wǎng)頁排版）真的很方便，特別是對于圖片，用一個(gè)css類.img-responsive就可以實(shí)現(xiàn)響應(yīng)（自動隨屏幕縮放，姑且這樣理解），一行代碼就實(shí)行了，如同使用html標(biāo)簽一樣，不需要考慮邏輯 。如下：
<img src=https://www.520longzhigu.com/diannao/”..” class=”img-responsive” />
響應(yīng)式圖片如何居中？
圖片居中在網(wǎng)頁制作中是常常會用到的，那響應(yīng)式圖片要如何居中呢？也很簡單，用一個(gè)css類.center-block就行了 。代碼如下：
<img src=https://www.520longzhigu.com/diannao/”…” class=”img-responsive center-block” />
這一行代碼讓圖片響應(yīng)且居中 。so easy!
但是問題也會來了！
1.那Bootstrap常用的.text-center類行不行（能不能讓響應(yīng)式圖片居中）呢？
答案是：通常情況下，.text-center類用于文字居中，對于非響應(yīng)式圖片，會起作用，而對于響應(yīng)式圖片，則不起作用 。
2.那.center-block 類換一個(gè)位置，會不會影響響應(yīng)式圖片的居中呢？
答案是：會的 。比如：<div class=“center-block”><img class=“img-responsive”src=https://www.520longzhigu.com/diannao/“…” />