原始處理方法是將要展示的圖片進(jìn)行處理。比如你的DIV寬度為500px（像素），那你上傳的圖片或放入網(wǎng)頁(yè)的圖片寬度就要小于500px，也就是你圖片需要圖片軟件剪切、等比例縮小方法處理后再上傳、放入網(wǎng)頁(yè)中解決撐破撐開DIV問(wèn)題。常見(jiàn)很多大型圖片站點(diǎn)、新聞?wù)军c(diǎn)都是將照片圖片進(jìn)行處理適應(yīng)網(wǎng)頁(yè)寬度情況下，進(jìn)行圖片編輯處理的。
如果不處理照片方法適應(yīng)DIV有限寬度，那可以對(duì)DIV設(shè)置隱藏超出內(nèi)容方法。只需要對(duì)DIV設(shè)置寬度后加入CSS樣式“overflow:hidden”即可解決隱藏圖片比DIV過(guò)寬部分解決撐破DIV問(wèn)題。
對(duì)圖片img標(biāo)簽中只加入寬度即可解決。這樣可以等比例縮小圖片，不會(huì)影響圖片畫面質(zhì)量。比如你的網(wǎng)頁(yè)DIV寬度為500px，那你上傳圖片后對(duì)img標(biāo)簽設(shè)置width等于500以下即可。
免費(fèi)AI編程助手
<img src="圖片路徑" width="小于你的DIV寬度" />即可解決圖片過(guò)寬導(dǎo)致DIV SPAN撐破，這樣好處可以等比例放大縮小圖片。
這種方法使用CSS直接對(duì)div內(nèi)的img進(jìn)行寬度設(shè)置，這樣不好的是如果圖片過(guò)小會(huì)影響網(wǎng)頁(yè)瀏覽圖片時(shí)候的效果。Div結(jié)構(gòu)：
<div class="W3Cschool"><img src="圖片路徑" /></div>對(duì)應(yīng)CSS代碼：
. W3Cschool img{width:寬度值+單位}
使用max-width（最大寬度），比如你DIV寬度為500px，那你對(duì)應(yīng)DIV樣式再加入最大寬度CSS樣式“max-width="500px" ”即可解決，但是在IE6瀏覽器不兼容此屬性，謹(jǐn)慎使用。
1）、最大寬度（max-width）+overflow:hidden。我們這樣設(shè)置可以讓IE6版本以上瀏覽器支持最大寬度樣式，也讓IE6下隱藏圖片超出寬度而撐開DIV得到解決，此方法比較方便和實(shí)用。
2）、只使用overflow:hidden屬性，如方法二
3）、圖片使用上傳時(shí)候軟件處理下，以適應(yīng)DIV布局寬度，如方法一以上為推薦解決IMG圖片撐破有限D(zhuǎn)IV寬度方法，根據(jù)實(shí)際情況大家可以任意選擇適合自己解決網(wǎng)頁(yè)中圖片撐破DIV層方法。
.
.
相關(guān)知識(shí)：
1.給圖片一個(gè)具體寬和高width=100px;height=100px;或者max-width：100px；max-height=100px（這個(gè)是設(shè)置最大的寬高但是有兼容性問(wèn)題，大部分還是支持的）；
2.給父類一個(gè)具體寬高然后設(shè)置 overflow:hidden，但是這樣圖片過(guò)大只能顯示部分不能夠全部顯示出來(lái)，可以用添加背景圖片background: url("2.jpg") round;（round這個(gè)屬性有兼容性問(wèn)題）
代碼如下
div{background: url("2.jpg") round;width: 200px;height: 200px;overflow: hidden;}
