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

您所在的位置：网站首页 › 图片宽高怎么调整 › 图片溢出div，超出div解决办法

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

2024-07-04 23:34| 来源: 网络整理| 查看: 265

当我的图片宽度大小没有设置，过大的时候，它会超出我的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 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。

方法四

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

完整代码如下

//缩放图片到合适大小 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 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();

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

完整代码如下

div图片溢出 #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; } window.onload = function(){ var imgs = document.getElementsByTagName("img"); var contentLeft = document.getElementById("col-md-7"); for(var i=0; i

【本文地址】

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

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

今日新闻

推荐新闻