展开
湖北国联计算机科技有限公司
  • 首页HOME
  • 公司简介INTRODUCTION
  • 安全防御DEFENSE
  • 软件开发SOFTWARE
  • 物联网IOT
  • 运行维护SRE
  • 成功案例CASE
  • 联系我们CONTACT
  • Software Technology Sharing |技术分享

    图片溢出div,超出div解决办法
    来源:湖北国联编辑部 时间:2018-07-10

    方法一

    给图片设置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

    当浏览器宽度发生变化时,图片还是会变,监听浏览器窗口变化,加入代码如下:

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

      }  

    }

    完整代码如下:

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

    <scripttype="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://uploadimages.jianshu.io/upload_images/4958474b0f8ff5d813edd7e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

               ![大图片](http://uploadimages.jianshu.io/upload_images/495847447fe7b80107cdb9a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

          </div>

          <div id="col-md-5"></div>

      </div>

    </body>

    </html>


    荆州地区政府网站建设 解决方案 专业团队 Copyright © 2016 武汉国联信通科技有限公司松滋分公司 地址:湖北省荆州市沙市区荆沙大道楚天都市佳园一期C区29栋112       地址:湖北省松滋市才知文化广场1141-1142号     邮编:434200 联系电话:0716-6666211     网站编辑部邮箱:business@gl-ns.com 备案号:鄂ICP备16011027号-1     企业名称:湖北国联计算机科技有限公司