溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下css怎么設置圖片不超過網頁寬度的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
讓大圖片不超越網頁寬度，讓圖片不撐破經由過程CSS格式設置的DIV寬度！
然后，咱們來簡介下網站在開發DIV+CSS的時候會遇到一個標題問題，在公布一個大圖片的時候由于圖片過寬會撐破本身配置的div寬度的標題問題。
圖片撐破布局起因
1、由于瀏覽器版本低（微軟IE6）
2、不有設置裝備擺設div構造的寬度
妄想圖片橫跨寬度或撐破div css構造方式
1、在文章中宣布圖片的時辰將圖片編輯縮小
2、經由對對應div的css來設置裝備擺設顯露的圖片最寬寬度 保舉
3、通過css對圖片設定寬度。
經過css來整治圖片撐破div機關案例
經由過程css來管束代碼如下(cmcss是對應父級類名)：
.cmcss {margin: auto;width: 600px;}
.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}這類圖片第一次加載時刻圖片不克不及展現
直接經由過程對對應的div內的形式圖片寬度設置裝備擺設代碼下列：
.cmcss img{ width:500px;} 寬度自定，可是不引薦此門徑，因為設置裝備擺設后此div結構內的圖片將全部寬度為500px，那樣將組成圖片小的，被放大浮現模糊。
可以通過對圖片設置最寬css可應用max-width來設置裝備擺設，但是IE6不贊成，然則可應用閱讀器的css hack來設置代碼如下
.cmcss img{max-width:500px;_width:500px;}
注明：顛末其他涉獵器不支持帶“_”的css，然則IE6支持。正好可以經由過程此css hack來完成對圖片寬度的那會。這里只能榨取IE6展示固定的寬度來適宜其它版本的兼容性。
裁減與進步
咱們看區分不同涉獵器CSS HACK的代碼
區別FF，IE7，IE6：
background:orange;*bac公斤round:green !important;*background:blue;
你籠統要問了，為甚么毋庸“*”來代替“_”來區分IE6閱讀器，這里值得留意的是ie6與IE7都邑正文與辨認“*”的，然則IE7對important的辨認具有優先全，以是IE7在CSS代碼中有important將有優先識別并成為獨一性，所以在有important時刻IE7和IE6后頭都可以用“*”號，然而豈論帶important在前或在后IE7將辨認為唯一區別css hack。所以這里沒有important的時辰須要用別的IE6的css hack中“_”小寫半角下劃線。
案例下列（Blue hills.jpg圖片為800像素寬的圖片）
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css5.com.cn案例-圖片不超越設置寬度</title> <style type="text/css"> <!--
.cmcss img{ max-width:150px;_width:150px;} --> </style> </head>
<body> 原始圖片寬度為800PX，配置后下列圖為150px <div class="cmcss"><img src="Blue hills.jpg" /></div> </body> </html>
以上就是“css怎么設置圖片不超過網頁寬度”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
