CSS怎么解決圖片過大撐破DIV網(wǎng)頁的問題？

一、防止圖片撐破DIV方法——縮小圖片尺寸

原始處理方法是將要展示的圖片進行處理。比如你的DIV寬度為500px（像素），那你上傳的圖片或放入網(wǎng)頁的圖片寬度就要小于500px，也就是你圖片需要圖片軟件剪切、等比例縮小方法處理后再上傳、放入網(wǎng)頁中解決撐破撐開DIV問題。常見很多大型圖片站點、新聞?wù)军c都是將照片圖片進行處理適應(yīng)網(wǎng)頁寬度情況下，進行圖片編輯處理的。

二、防止圖片撐開DIV方法——隱藏超出內(nèi)容

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

三、CSS解決撐破解決方法——img標簽添加寬度參數(shù)

對圖片img標簽中只加入寬度即可解決。這樣可以等比例縮小圖片，不會影響圖片畫面質(zhì)量。比如你的網(wǎng)頁DIV寬度為500px，那你上傳圖片后對img標簽設(shè)置width等于500以下即可。

<img src="圖片路徑" width="小于你的DIV寬度" />

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

四、CSS解決撐破方法——CSS直接對div內(nèi)的img進行寬度設(shè)置

這種方法使用CSS直接對div內(nèi)的img進行寬度設(shè)置，這樣不好的是如果圖片過小會影響網(wǎng)頁瀏覽圖片時候的效果。Div結(jié)構(gòu)：

<div class="W3Cschool"><img src="圖片路徑" /></div>

對應(yīng)CSS代碼：

. W3Cschool img{width:寬度值+單位}

五、CSS解決圖片撐破撐開DIV方法——使用max-width（最大寬度）

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

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

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

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

3）、圖片使用上傳時候軟件處理下，以適應(yīng)DIV布局寬度，如方法一以上為推薦解決IMG圖片撐破有限D(zhuǎn)IV寬度方法，根據(jù)實際情況大家可以任意選擇適合自己解決網(wǎng)頁中圖片撐破DIV層方法。

.

.

相關(guān)知識：

• HTML 圖像
• HTML <img>標簽
• CSS width（寬度） 屬性
• CSS Display(顯示) 與 Visibility（可見性）

設(shè)置圖片百分比

1.給圖片一個具體寬和高width=100px;height=100px;或者max-width：100px；max-height=100px（這個是設(shè)置最大的寬高但是有兼容性問題，大部分還是支持的）；

2.給父類一個具體寬高然后設(shè)置 overflow:hidden，但是這樣圖片過大只能顯示部分不能夠全部顯示出來，可以用添加背景圖片background: url("2.jpg") round;（round這個屬性有兼容性問題）

代碼如下

div{background: url("2.jpg") round;width: 200px;height: 200px;overflow: hidden;}

很實用~

沙發(fā)這么詳細，讓我還能咋說

剛學習程序,過來學習學習!!!!...

大神在哪里呀,大神在哪里呀,大神在哪里呀.

快來解決啦！快來！快來！ 快來 快來