7.2日音訊,css對圖片的幾點用法詳解。在網(wǎng)頁內(nèi)容中如果插入大于DIV層寬度顯示，過大的圖片將會撐破網(wǎng)頁寬度顯示從而網(wǎng)頁嚴重變形，您是否遇到過？這里邯鄲首創(chuàng)網(wǎng)絡(luò)來給大家介紹幾種解決圖片撐破撐開網(wǎng)頁DIV層方法。圖片撐破寬度解決方法、CSS設(shè)置div層寬度圖片大于設(shè)置div寬度后撐破div固定寬度解決方法方案，隱藏圖片超出撐破寬度方法。

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

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

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

　　常見很多大型圖片站點、新聞?wù)军c都是將照片圖片進行處理適應(yīng)網(wǎng)頁寬度情況下，進行圖片編輯處理的。

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

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

　　三、解決方法三-TOP

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

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

　　<imgsrc="圖片路徑"width="小于你的DIV寬度"/>即可解決圖片過寬導(dǎo)致DIVSPAN撐破，這樣好處可以等比例放大縮小圖片。

　　四、CSS解決撐破方法四-TOP

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

　　Div結(jié)構(gòu)：<divclass="img"><imgsrc="圖片路徑"/></div>

　　對應(yīng)CSS代碼：.divcssimg{width:寬度值+單位}

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

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

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

　　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層方法。

　　CSS樣式實現(xiàn)溢出超出DIV邊框?qū)挾雀叨鹊膬?nèi)容自動隱藏方法

　　平時我們布局時候，有的文字內(nèi)容多了會超過溢出我們限制的高度，有的圖片會撐破DIV，讓網(wǎng)頁錯位變亂。

　　這樣我們就需要解決如何使用CSS來超出設(shè)置CSS寬度和CSS高度的內(nèi)容自動隱藏掉，又不撐破DIV布局。

　　特別是在IE6，如果內(nèi)容超出對象高度和寬度承載，將會被撐破增高，這個時候我們可以利用以下解決方法。

　　一、解決CSS樣式-TOP

　　這時我們可以使用CSSoverflow樣式解決：

　　對應(yīng)樣式overflow:hidden

　　Div{overflow:hidden}

　　這樣設(shè)置后，假如DIV對象設(shè)置一定寬度高度，此時加入overflow:hidden將會隱藏超出DIV寬度高度的內(nèi)容包括圖片。

　　相關(guān)閱讀：css實現(xiàn)溢出超出文字內(nèi)容顯示省略號

　　二、隱藏超出內(nèi)容案例-TOP

　　1、隱藏超出對象寬度高度文字內(nèi)容

　　假如我們在一個布局中為了美觀對齊，有時我們需要設(shè)置了對象高寬后就固定了，這個時候需要實現(xiàn)無論多少內(nèi)容文字都不要超出設(shè)置寬度高度布局，這個時候我們需要overflow:hidden幫忙。

　　CSS代碼：

　　<style>

　　.divcss5{width:300px;height:50px;line-height:25px;overflow:hidden}

　　/*設(shè)置對象高度寬度，同時設(shè)置overflow:hidden*/

　　</style>

　　Html代碼：

　　<divclass="divcss">歡迎來到首創(chuàng)網(wǎng)絡(luò)，

　　在這里你可以學(xué)習(xí)CSS同時也可以下載需要的資源，

　　同時可以找到自己常見問題答案</div>

　　隱藏多余文字內(nèi)容方法案例截圖

　　CSS隱藏溢出內(nèi)容方法示范截圖

　　這樣設(shè)置了overflow:hidden無論多少內(nèi)容都會隱藏對象設(shè)置寬度和高度以外裝不下的內(nèi)容。

　　2、隱藏超出對象寬度的圖片部分案例

　　這里設(shè)置一個一定CSS寬度和CSS高度的對象盒子，放一個大的圖片，然后使用overflow:hidden隱藏其超出部分。

　　Css代碼

　　<style>

　　.divcss5{width:300px;height:50px;line-height:25px;overflow:hidden}

　　/*設(shè)置對象高度寬度，同時設(shè)置overflow:hidden*/