圖片溢出div問題的快速解決方法推薦

前兩天編寫了一個(gè)前端頁面,在本機(jī)上顯示一切正常。不過在不斷的測試中,發(fā)現(xiàn)了一個(gè)嚴(yán)重的問題,如果圖片過大,會(huì)撐破div溢出來。再由于頁面是自適應(yīng)頁面,根據(jù)不同分辨率的顯示器會(huì)做出相應(yīng)的div寬度調(diào)整,所以圖片即使不大,但是因分辨率不同也會(huì)出現(xiàn)溢出的情況。
這里探討總結(jié)一下解決方法。
首先我們先來做個(gè)簡單的css布局:
- <html>
- <head>
- <meta charset="utf-8" />
- <title>div圖片溢出的解決方案</title>
- <style type="text/css">
- #div_home {
- width:80%;
- margin: 0 auto;
- }
- #div_left {
- width:70%;
- height: 800px;
- float:left;
- padding: 20px;
- }
- #div_right {
- width: 15%;
- float: right;
- height: 800px;
- padding: 20px;
- }
- </style>
- <script type="text/javascript">
- </script>
- </head>
- <body>
- <div id="div_home">
- <div id="div_left">
- <img src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/600950/o_123.png" alt="小圖片"/>
- </div>
- <div id="div_right"></div>
- </div>
- </body>
- </html>
下面我們再插入尺寸大于div的圖片
<img id="img_test" src="//img.jbzj.com/file_images/article/201604/neywzwdjof0.jpg" alt="大圖片"/>
來看看效果:
這里的圖片過大,溢出了div,這里來探討一下解決方案:
解決方案一
在css中設(shè)置該圖片的樣式,把最大寬設(shè)置為小于它父級(jí)div的寬
img { max-width: 730px;}
但是這樣對于不同分辨率的屏幕,也會(huì)出現(xiàn)溢出的問題
先來看一下1366*728的分辨率(本機(jī)分辨率)下的圖片顯示情況:
似乎解決了問題,我們把分辨率調(diào)為 1024*768,來看看效果:
圖片還是溢出來了,對于這種分辨率的屏幕,肯定體驗(yàn)很不友好。
那么,為了解決還是溢出的問題,可以加入另外一種方法:
解決方案二
不顯示溢出的部分:
overflow: hidden;
這個(gè)代碼加在div_left 下面:
- #div_left {
- width:70%;
- height: 800px;
- float:left;
- padding: 20px;
- overflow: hidden;
- }
顯然,這種方法的弊端就是圖片不能完全顯示,我們來試試:
雖然解決了溢出的問題,但是顯示效果上不友好,如果被隱藏的部分剛好有重要的信息,那么這樣的設(shè)計(jì)是不合理的。
最終解決方案
要滿足解決圖片溢出div問題,同時(shí)圖片能完整顯示,也要兼容不同的分辨率這三個(gè)條件,這里用一段JavaScript代碼來解決。
思路是獲取 div 的寬,然后動(dòng)態(tài)設(shè)置圖片的寬度,就這么簡單。
在敲代碼之前,先刪除 overflow:hidden; 代碼,這種“將就”的處理方法我們應(yīng)該摒棄。
- window.onload = function(){
- var getEle = document.getElementsByTagName("img");
- var getEle_divLeft = document.getElementById("div_left");
- for(var i=0; i<getEle.length; i++){
- getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這里-40是padding的左右寬度和
- }
- }
在1028*768的屏幕下的效果:
在1366*768下的效果:
可能存在的bug及解決對策
有些div在開始加載的時(shí)候,會(huì)因?yàn)閳D片的寬度比較大而變寬,然后再由于布局浮動(dòng)的影響再變小,由于圖片獲取的是一開始的div寬度,所以他的寬度還是不變。
這里給出保守的解決方案:
在css中,先把圖片屬性設(shè)置為none,不顯示。在加載javascript代碼的時(shí)候,設(shè)置寬高,再顯示出來:
- img {
- max-width: 730px;
- display: none;
- }
在JavaScript后面加入顯示圖片代碼:
getEle[i].style["display"] = "inline";
在代碼中的位置:
- window.onload = function(){
- var getEle = document.getElementsByTagName("img");
- var getEle_divLeft = document.getElementById("div_left");
- for(var i=0; i<getEle.length; i++){
- getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這里-40是padding的左右寬度和
- getEle[i].style["display"] = "inline";
- }
- }
這樣就解決了這個(gè)圖片顯示溢出div問題,并滿足上面三個(gè)條件。
完整代碼:
- <html>
- <head>
- <meta charset="utf-8" />
- <title>div圖片溢出的解決方案</title>
- <style type="text/css">
- #div_home {
- width:80%;
- margin: 0 auto;
- }
- #div_left {
- width:70%;
- height: 800px;
- float:left;
- background-color: #836FFF;
- padding: 20px;
- }
- #div_right {
- width: 15%;
- float: right;
- height: 800px;
- background-color: #CDCD00;
- padding: 20px;
- }
- img {
- max-width: 730px;
- display: none;
- }
- </style>
- <script type="text/javascript">
- window.onload = function(){
- var getEle = document.getElementsByTagName("img");
- var getEle_divLeft = document.getElementById("div_left");
- for(var i=0; i<getEle.length; i++){
- getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這里-40是padding的左右寬度和
- getEle[i].style["display"] = "inline";
- }
- }
- </script>
- </head>
- <body>
- <div id="div_home">
- <div id="div_left">
- <img src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/600950/o_123.png" alt="小圖片"/>
- <img src="http://www.xiaoxiongbizhi.com/wallpapers/__85/y/w/ywzwdjof0.jpg" alt="大圖片"/>
- </div>
- <div id="div_right"></div>
- </div>
- </body>
- </html>
補(bǔ)充:
如果瀏覽器不支持max-width屬性,可以給出一個(gè)判斷,具體思路如下:
如果瀏覽器不支持某個(gè)CSS屬性,那么得到的返回值為undefined,如果支持,則返回空,基于這一點(diǎn),我們可以加一個(gè)判斷
代碼:
- if(getEle[0].style["max-width"]==''){
- //支持max-width的瀏覽器
- }else{
- //不支持max-width的處理
- }
- <script type="text/javascript">
- window.onload = function(){
- var getEle = document.getElementsByTagName("img");
- var getEle_divLeft = document.getElementById("div_left");
- if(getEle[0].style["max-width"]==''){for(var i=0; i<getEle.length; i++){
- getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這里-40是padding的左右寬度和
- getEle[i].style["display"] = "inline";
- }
- }else{
- //不支持max-width的解決方案
- for(var i=0; i<getEle.length; i++){
- if(getEle[i].width > getEle_divLeft.offsetWidth-40){
- getEle[i].style["width"] = getEle_divLeft.offsetWidth - 40 + "px";
- }
- getEle[i].style["display"] = "inline";
- }
- }
- }
- </script>
以上這篇圖片溢出div問題的快速解決方法推薦就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
- 下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動(dòng)常用方法總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-06
- 這篇文章主要為大家詳細(xì)介紹了CSS教程之div垂直居中的多種方法,還包括多行文本垂直居中的方法,感興趣的小伙伴們可以參考一下2016-05-05
關(guān)于div與>div的區(qū)別小結(jié)
下面小編就為大家?guī)硪黄P(guān)于div與>div的區(qū)別小結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-04- Divxdra1031.Dll2016-04-30
如何讓一個(gè)div居于頁面正中間【實(shí)現(xiàn)方法】
下面小編就為大家?guī)硪黄绾巫屢粋€(gè)div居于頁面正中間【實(shí)現(xiàn)方法】。小編覺得挺不錯(cuò)的,現(xiàn)在分享個(gè)大家,也給大家做個(gè)參考2016-04-15css三種方法實(shí)現(xiàn)div在瀏覽器水平居中
這篇文章主要介紹了css三種實(shí)現(xiàn)div在瀏覽器水平居中的方法,感興趣的小伙伴們可以參考一下2016-04-14一個(gè)div在瀏覽器水平居中的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄粋€(gè)div在瀏覽器水平居中的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-04-14div+CSS制作類似微信對話氣泡效果的實(shí)例總結(jié)
這篇文章主要介紹了div+CSS制作類似微信對話氣泡效果的實(shí)例總結(jié),文中總結(jié)出了四種編寫方式,并且對三角形的繪制有一個(gè)補(bǔ)充說明,需要的朋友可以參考下2016-04-01兩個(gè)div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法
下面小編就為大家?guī)硪黄獌蓚€(gè)div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-09