7.2日音訊,css對(duì)圖片的幾點(diǎn)用法詳解

發(fā)布日期：2013-07-02文章來(lái)源：首創(chuàng)網(wǎng)絡(luò)瀏覽次數(shù)：754次

7.2日音訊,css對(duì)圖片的幾點(diǎn)用法詳解。在網(wǎng)頁(yè)內(nèi)容中如果插入大于DIV層寬度顯示，過大的圖片將會(huì)撐破網(wǎng)頁(yè)寬度顯示從而網(wǎng)頁(yè)嚴(yán)重變形，您是否遇到過？這里邯鄲首創(chuàng)網(wǎng)絡(luò)來(lái)給大家介紹幾種解決圖片撐破撐開網(wǎng)頁(yè)DIV層方法。圖......

本文關(guān)鍵字：7.2日,音訊,css,對(duì),圖片,的,幾點(diǎn),用法,詳解,

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

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

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

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

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

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

　　三、解決方法三-TOP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　一、解決CSS樣式-TOP

　　這時(shí)我們可以使用CSSoverflow樣式解決：

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

　　Div{overflow:hidden}

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

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

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

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

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

　　CSS代碼：

　　<style>

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

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

　　</style>

　　Html代碼：

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

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

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

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

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

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