欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片溢出div,超出div解决办法

程序员文章站 2022-05-01 20:17:49
...

当我的图片宽度大小没有设置,过大的时候,它会超出我的div宽度。这个时候,我给它设置了一个小于我的div的宽度,它是可以进入div盒子而不溢出的,然而,当我们的浏览器缩小的时候,我的div是栅格布局,固定了百分比会随浏览器可视界面而缩小,但是此时图片因为固定宽度不能同步缩小,还是会发生溢出现象。还有一种将就的办法,就是设置overflow:hidden,隐藏溢出的部分,但是大家都可以预料的到那种糟糕的效果

我的解决办法

方法一

给图片设置width:100%

方法二

可以使用一段js来解决

window.onload = function(){
//获取图片元素
 var imgs = document.getElementsByTagName("img");
//获取div元素   
 var contentLeft = document.getElementById("col-md-7");
//使用js设置图片元素宽度的变化    
for(var i=0; i<imgs.length; i++){
        imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
    }
}
//40是要减去padding

方法三

  1. 使用CSS max-width和max-height实现图片自动等比例缩小

  2. 很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。

  3. 使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height,IE6不支持,我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:e­xpression(this.height>100?"100px":this.height);。

<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >


方法四

此时无论怎么响应,图片永远不会溢出

完整代码如下

<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >


//缩放图片到合适大小
function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=550;
   var maxheight=880
   var imgs = document.getElementById('article').getElementsByTagName('img');   //如果你定义的id不是article,请修改此处


   for(i=0;i<imgs.length;i++){
     myimg = imgs[i];


     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{
         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}
//缩放图片到合适大小
ResizeImages();
</script>



此时无论怎么响应,图片永远不会溢出

完整代码如下


<html>
<head>
    <meta charset="utf-8" />
    <title>div图片溢出</title>

<style type="text/css">

#container {
    width:80%;
    margin: 0 auto;
}

#col-md-7 {
    width:70%;
    height: 800px;
    float:left;
    border:1px solid red;
    padding: 20px;
}

#col-md-5 {
    width: 15%;
    float: right;
    height: 800px;
    border:1px solid blue;
    padding: 20px;
}

img {
    max-width: 730px;
}

</style>

<script type="text/javascript">

window.onload = function(){
    var imgs = document.getElementsByTagName("img");
    var contentLeft = document.getElementById("col-md-7");
    for(var i=0; i<imgs.length; i++){
        imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
    }
}
window.onresize = function(){
    var imgs = document.getElementsByTagName("img");
    var contentLeft = document.getElementById("col-md-7");
    for(var i=0; i<imgs.length; i++){
        imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
    }   
}
</script>

</head>


<body>
    <div id="container">
        <div id="col-md-7">
            ![小图片](http://upload-images.jianshu.io/upload_images/4958474-b0f8ff5d813edd7e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![大图片](http://upload-images.jianshu.io/upload_images/4958474-47fe7b80107cdb9a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
        <div id="col-md-5"></div>
    </div>
</body>
</html>

转载:
https://www.jianshu.com/p/42e78786d09b

此时无论怎么响应,图片永远不会溢出

完整代码如下

相关标签: div