一、防止圖片撐破DIV方法一

原始處理方法是將要展示的圖片進行處理。比如你的DIV寬度為500px(像素)，那你上傳的圖片或放入網頁的圖片寬度就要小于500px，也就是你圖片需要圖片軟件剪切、等比例縮小方法處理后再上傳、放入網頁中解決撐破撐開DIV問題。

常見很多大型圖片站點、新聞站點都是將照片圖片進行處理適應網頁寬度情況下，進行圖片編輯處理的。

二、防止圖片撐開DIV方法二

如果不處理照片方法適應DIV有限寬度，那可以對DIV設置隱藏超出內容方法。只需要對DIV設置寬度后加入CSS樣式“overflow:hidden”即可解決隱藏圖片比DIV過寬部分解決撐破DIV問題。

三、解決方法三

對圖片img標簽中只加入寬度即可解決。這樣可以等比例縮小圖片，不會影響圖片畫面質量。

比如你的網頁DIV寬度為500px，那你上傳圖片后對img標簽設置width等于500以下即可。

即可解決圖片過寬導致DIV SPAN撐破，這樣好處可以等比例放大縮小圖片。

四、CSS解決撐破方法四

這種方法使用CSS直接對div內的img進行寬度設置，這樣不好是如果圖片過小會影響網頁瀏覽圖片時候效果。

Div結構：

對應CSS代碼：.divcss5 img{width:寬度值+單位}

五、CSS解決圖片撐破撐開DIV方法五

使用max-width(最大寬度)，比如你DIV寬度為500px，那你對應DIV樣式再加入最大寬度CSS樣式“max-width="500px"”即可解決，但是在IE6瀏覽器不兼容此屬性，謹慎使用。

六、解決圖片撐破DIV層方法總結與推薦

1)、最大寬度(max-width)+overflow:hidden。我們這樣設置可以讓IE6版本以上瀏覽器支持最大寬度樣式，也讓IE6下隱藏圖片超出寬度而撐開DIV得到解決，此方法比較方便和實用。

2)、只使用overflow:hidden屬性，如方法二

3)、圖片使用上傳時候軟件處理下，以適應DIV布局寬度，如方法一

總結

以上是生活随笔為你收集整理的css图片过大,CSS解决图片过大撑破DIV的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。