防止圖片撐破頁面的CSS代碼
日期:2015-01-04 作者:管理員 來源:本站
前言:在做網站的時候,一部分人會遇到上傳的圖片太大了,把網站頁面給撐破了,這樣網站也不美觀了。當然了,上傳到網站的圖片如果能用圖片處理軟件處理下那是最好的,既美觀又節省空間容量,但是很多人還是不太會用圖片處理軟件,那么網訊互聯就教大家用純CSS代碼的方式來防止圖片撐破網站頁面,圖片會自動按比例縮小。
詳細純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>
資料整理:珠海網站建設網 http://themarineoutfitters.com 轉載時請注意標明來源。
掃二維碼手機查看該文章