1. 程式人生 > >圖片在手機上無法自適應顯示該怎麽辦【解決方案】

圖片在手機上無法自適應顯示該怎麽辦【解決方案】

定義 謝謝 block 解決 也有 通過 適應 今天 研究

今天春哥技術博客的一個粉絲朋友向春哥請教說,他自己做了一個網站,但是圖片手機端不能自適應,很不美觀,叫春哥幫忙看看。

經過春哥研究發現,問題其實很簡單。

找到對應的CSS文件。將圖片的寬度屬性設為100%即可,至此問題解決。

img {

border: 0;

width: 100%;【此為春哥多加的一條】

display: block;

}
這樣也有一個問題,全部手機站裏的圖片寬度都成width:100%了。
可以通過外圍div的class精確控制。
比如:
<div class=‘test‘>
<img src=‘手機站展示的圖片路徑‘/>
</div>
則可以這樣定義:
.test img{width: 100% !important; height:auto !important;}

上面的!important表示強調優先級別。因為有些圖片格式是自帶寬高限制的。
完美。。

本文出自春哥技術博客官網,未經允許不得轉載,謝謝!

圖片在手機上無法自適應顯示該怎麽辦【解決方案】