溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

圖片在手機上無法自適應(yīng)顯示該怎么辦【解決方案】

發(fā)布時間:2020-08-11 07:57:03 來源:網(wǎng)絡(luò) 閱讀:713 作者:春哥技博客 欄目:web開發(fā)

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

經(jīng)過春哥研究發(fā)現(xiàn),問題其實很簡單。

找到對應(yīng)的CSS文件。將圖片的寬度屬性設(shè)為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表示強調(diào)優(yōu)先級別。因為有些圖片格式是自帶寬高限制的。
完美。。

本文出自春哥技術(shù)博客官網(wǎng),未經(jīng)允許不得轉(zhuǎn)載,謝謝!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI