防止圖片撐破頁面的CSS代碼
前言:在做網(wǎng)站的時(shí)候,一部分人會(huì)遇到上傳的圖片太大了,把網(wǎng)站頁面給撐破了,這樣網(wǎng)站也不美觀了。當(dāng)然了,上傳到網(wǎng)站的圖片如果能用圖片處理軟件處理下那是最好的,既美觀又節(jié)省空間容量,但是很多人還是不太會(huì)用圖片處理軟件,那么網(wǎng)訊互聯(lián)就教大家用純CSS代碼的方式來防止圖片撐破網(wǎng)站頁面,圖片會(huì)自動(dòng)按比例縮小。
詳細(xì)純css的防止圖片撐破頁面的代碼:
CSS代碼:
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
插入位置代碼:
<div class="content-width">
<p><img src="圖片路徑"/></p>
<p><img src="圖片路徑"/></p>
</div>
資料整理:珠海網(wǎng)站建設(shè)網(wǎng) http://daago.cn 轉(zhuǎn)載時(shí)請(qǐng)注意標(biāo)明來源。
掃二維碼手機(jī)查看該文章