图片溢出div问题的最终解决方案

时间：2022-09-03 11:32:37

2016.11.20备注：

此问题通过css的max-width:100%;即可解决。

　　前两天编写了一个前端页面，在本机上显示一切正常。不过在不断的测试中，发现了一个严重的问题，如果图片过大，会撑破div溢出来。再由于页面是自适应页面，根据不同分辨率的显示器会做出相应的div宽度调整，所以图片即使不大，但是因分辨率不同也会出现溢出的情况。

　　这里探讨总结一下解决方法。

　　首先我们先来做个简单的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问题的最终解决方案

　　

　　下面我们再插入尺寸大于div的图片

<img id="img_test" src="http://www.xiaoxiongbizhi.com/wallpapers/__85/y/w/ywzwdjof0.jpg" alt="大图片"/>

　　来看看效果：
 图片溢出div问题的最终解决方案

　　这里的图片过大，溢出了div，这里来探讨一下解决方案：

解决方案一

　　在css中设置该图片的样式，把最大宽设置为小于它父级div的宽

img {

    max-width: 730px;

}

　　但是这样对于不同分辨率的屏幕，也会出现溢出的问题

　　先来看一下1366*728的分辨率（本机分辨率）下的图片显示情况：

图片溢出div问题的最终解决方案

　　似乎解决了问题，我们把分辨率调为 1024*768，来看看效果：

图片溢出div问题的最终解决方案

　　图片还是溢出来了，对于这种分辨率的屏幕，肯定体验很不友好。

　　那么，为了解决还是溢出的问题，可以加入另外一种方法：

解决方案二

　　不显示溢出的部分：

overflow: hidden;

　　这个代码加在div_left 下面：

#div_left {

    width:70%;

    height: 800px;

    float:left;

    padding: 20px;

    overflow: hidden;

}

　　显然，这种方法的弊端就是图片不能完全显示，我们来试试：

图片溢出div问题的最终解决方案
 
　　虽然解决了溢出的问题，但是显示效果上不友好，如果被隐藏的部分刚好有重要的信息，那么这样的设计是不合理的。

最终解决方案

　　要满足解决图片溢出div问题，同时图片能完整显示，也要兼容不同的分辨率这三个条件，这里用一段JavaScript代码来解决。
　　思路是获取 div 的宽，然后动态设置图片的宽度，就这么简单。

　　在敲代码之前，先删除 overflow:hidden; 代码，这种“将就”的处理方法我们应该摒弃。

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的屏幕下的效果：

图片溢出div问题的最终解决方案
　　

　　在1366*768下的效果：

图片溢出div问题的最终解决方案

可能存在的bug及解决对策

　　有些div在开始加载的时候，会因为图片的宽度比较大而变宽，然后再由于布局浮动的影响再变小，由于图片获取的是一开始的div宽度，所以他的宽度还是不变。

　　这里给出保守的解决方案：

　　在css中，先把图片属性设置为none，不显示。在加载javascript代码的时候，设置宽高，再显示出来：

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";

    }

}

　　这样就解决了这个图片显示溢出div问题，并满足上面三个条件。

　　完整代码：

<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>

补充：

如果浏览器不支持max-width属性，可以给出一个判断，具体思路如下：

如果浏览器不支持某个CSS属性，那么得到的返回值为undefined，如果支持，则返回空，基于这一点，我们可以加一个判断

代码：

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问题的最终解决方案的更多相关文章

  1. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

  2. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

  3. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  4. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  5. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  6. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  7. 【IE6的疯狂之五】div遮盖select的解决方案

    IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...

  8. 挖矿病毒 qW3xT&period;2 最终解决方案

    转自:https://blog.csdn.net/hgx13467479678/article/details/82347473 1,cpu 100%, 用top 查看cpu100 2,删掉此进程 c ...

  9. 图片大于div时的居中显示

    当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden:这时即使外层div设置了水平垂直居 ...

随机推荐

  1. 深入理解定时器系列——被誉为神器的requestAnimationFrame

    与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...

  2. phpcms 01

    1 安装完成phpcms,然后打开2 C:\wamp\www\phpcms\templates 复制下面的default 目录,改名为ypzy2014 3 修改ypzy2014文件夹下的config配 ...

  3. JS范围

    JS API-->DOM/PoneGap/Cordova/Android/NodeJS JS OOP

  4. jQuery两个列表中元素相互交换Demo

    效果如图: <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  5. 非均匀B样条拟合MATLAB程序

    直接上代码,多的不再说了. %------------------非均匀B样条拟合MATLAB程序----------------- clear k=; x=load('data.txt'); [n, ...

  6. Linux 常见文件打包压缩命令

    .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!)       参数说明:         - ...

  7. zepto源码研究 - fx&lowbar;methods&period;js

    简要:依赖fx.js,主要是针对show,hide,fadeIn,fadeOut的封装. 源码如下: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zept ...

  8. 生成淘口令发现的一个趣事 c&num;

    1.今天,查看网站log,发现如下报错 详细错误:未将对象引用设置到对象的实例. 报错url:http://www.94dazhe.com/mobile/goods/show-546829202052 ...

  9. dojo小代码

    RunSource Using event delegation on an HTML table to highlight rows and columns. ------------------- ...

  10. 2&period;2 dubbo-spi源码解析

    package com.alibaba.dubbo.demo.test; import com.alibaba.dubbo.common.extension.ExtensionLoader; impo ...

相关文章