響應式圖片如何響應？
Bootstrap框架來製作響應式網站（或稱之為響應式網頁排版）真的很方便，特別是對於圖片，用一個css類.img-responsive就可以實現響應（自動隨屏幕縮放，姑且這樣理解），一行代碼就實行了，如同使用html標籤一樣，不需要考慮邏輯。如下：
<img src=”..” class=”img-responsive” />
響應式圖片如何居中？
圖片居中在網頁製作中是常常會用到的，那響應式圖片要如何居中呢？也很簡單，用一個css類.center-block就行了。代碼如下：
<img src=”…” class=”img-responsive center-block” />
這一行代碼讓圖片響應且居中。so easy!
但是問題也會來了！
1.那Bootstrap常用的.text-center類行不行（能不能讓響應式圖片居中）呢？
答案是：通常情況下，.text-center類用於文字居中，對於非響應式圖片，會起作用，而對於響應式圖片，則不起作用。
2.那.center-block 類換一個位置，會不會影響響應式圖片的居中呢？
答案是：會的。比如：<div class=“center-block”><img class=“img-responsive”src=“…” /></div>這樣就會失效。
為什麼？
不要問那麼多。上面標紅的代碼就是正確標準的。收藏好本頁響應式圖片居中的核心技巧，網站製作時有需要時，順手一抄完事。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/259173.html
微信掃一掃 
支付寶掃一掃 