讓大圖片不超過(guò)網(wǎng)頁(yè)寬度，讓圖片不撐破通過(guò)CSS樣式設(shè)置的DIV寬度！

接下來(lái)，我們來(lái)介紹下網(wǎng)站在開(kāi)發(fā)DIV+CSS的時(shí)候會(huì)遇到一個(gè)問(wèn)題，在發(fā)布一個(gè)大圖片的時(shí)候因?yàn)閳D片過(guò)寬會(huì)撐破自己設(shè)置的div寬度的問(wèn)題。

圖片撐破布局原因

1、由于瀏覽器版本低(微軟IE6)

2、沒(méi)有設(shè)置div布局的寬度

解決圖片超出寬度或撐破div css布局方法

1、在文章中發(fā)布圖片的時(shí)候?qū)D片編輯縮小

2、通過(guò)對(duì)對(duì)應(yīng)div的css來(lái)設(shè)置顯示的圖片最寬寬度 推薦

3、通過(guò)css對(duì)圖片設(shè)定寬度。

通過(guò)css來(lái)解決圖片撐破div布局案例

通過(guò)css來(lái)控制代碼如下(cmcss是對(duì)應(yīng)父級(jí)類(lèi)名)：

.cmcss {margin: auto;width: 600px;}

.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}這種圖片第一次加載時(shí)候圖片不能顯示

直接通過(guò)對(duì)對(duì)應(yīng)的div內(nèi)的內(nèi)容圖片寬度設(shè)置代碼如下：

.cmcss img{ width:500px;} 寬度自定，但是不推薦此方法，因?yàn)樵O(shè)置后此div布局內(nèi)的圖片將全部寬度為500px，那樣將造成圖片小的，被放大顯示模糊。

可以通過(guò)對(duì)圖片設(shè)置最寬css可以使用max-width來(lái)設(shè)置，但是IE6不支持，但是可以使用瀏覽器的css hack來(lái)設(shè)置代碼如下

.cmcss img{max-width:500px;_width:500px;}

說(shuō)明：通過(guò)其他瀏覽器不支持帶“_”的css，但是IE6支持。剛好可以通過(guò)此css hack來(lái)實(shí)現(xiàn)對(duì)圖片寬度的現(xiàn)在。這里只能克服IE6顯示固定的寬度來(lái)符合其它版本的兼容性。

擴(kuò)展與提高

我們看區(qū)別不同瀏覽器CSS HACK的代碼

區(qū)別FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

你可能要問(wèn)了，為什么不用“*”來(lái)代替“_”來(lái)區(qū)別IE6瀏覽器，這里值得注意的是ie6和IE7都會(huì)解釋和識(shí)別“*”的，但是IE7對(duì)important的識(shí)別具有優(yōu)先全，所以IE7在CSS代碼中有important將有優(yōu)先識(shí)別并成為唯一性，所以在有important時(shí)候IE7和IE6前面都可以用“*”號(hào)，但是無(wú)論帶important在前或在后IE7將識(shí)別為唯一區(qū)別css hack。所以這里沒(méi)有important的時(shí)候需要用另外IE6的css hack中“_”小寫(xiě)半角下劃線。

案例如下(Blue hills.jpg圖片為800像素寬的圖片)

代碼：

www.divcss5.com案例-圖片不超過(guò)設(shè)置寬度

原始圖片寬度為800PX，設(shè)置后如下圖為150px

截圖如下：

通過(guò)此方法對(duì)圖片的寬度設(shè)置最大寬度為多少，css代碼少方便，推薦此方法來(lái)解決圖片撐破div css布局的寬度。

總結(jié)

以上是生活随笔為你收集整理的html设置div页面最底,使用css让大图片不超过网页宽度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。