讓大圖片不超過網頁寬度，讓圖片不撐破通過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;*background: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>www.divcss5.com案例-圖片不超過設定寬度</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代碼少方便，推薦此方法來解決圖片撐破div css布局的寬度。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
