CSS解決圖片過大撐破DIV網頁方法

CSS解決圖片過大撐破DIV網頁方法

一、防止圖片撐破DIV方法一  
原始處理方法是將要展示的圖片進行處理。比如你的DIV寬度為500px（像素，那你上傳的圖片或放入網頁的圖片寬度就要小於500px，也就是你圖片需要圖片軟體剪下、等比例縮小方法處理後再上傳、放入網頁中解決撐破撐開DIV問題。
常見很多大型圖片網站、新聞網站都是將照片圖片進行處理適應網頁寬度情況下，進行圖片編輯處理的。

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

三、解決方案
對圖片img標籤中只加入寬度即可解決。這樣可以等比例縮小圖片，不會影響圖片畫面品質。
比如你的網頁DIV寬度為500px，那你上傳圖片後對img標籤設定width等於500以下即可。
<img src="圖片路徑" width="小於你的DIV寬度" />即可解決圖片過寬導致DIV SPAN撐破，這樣好處可以等比例放大縮小圖片。

四、CSS解決撐破方法四
這種方法使用CSS直接對div內的img進行寬度設定，這樣不好是如果圖片過小會影響網頁瀏覽圖片時候效果。
Div結構：<div class="divcss5"><img src="圖片路徑" /></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布局寬度，如方法一
以上為推薦解決IMG圖片撐破有限DIV寬度方法，根據實際情況大家可以任意選擇適合自己解決網頁中圖片撐破DIV層方法。