展開
湖北國聯計算機科技有限公司
  • 3d开奖直播在哪个频道
  • 公司簡介INTRODUCTION
  • 安全防御DEFENSE
  • 軟件開發SOFTWARE
  • 物聯網IOT
  • 運行維護SRE
  • 成功案例CASE
  • 聯系我們CONTACT
  • 85期开奖直播开奖号: Software Technology Sharing |技術分享

    圖片溢出div,超出div解決辦法
    來源:湖北國聯編輯部 時間:2018-07-10

    3d开奖直播在哪个频道 www.aikjm.icu

    方法一

    給圖片設置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">

               ![小圖片](//uploadimages.jianshu.io/upload_images/4958474b0f8ff5d813edd7e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

               ![大圖片](//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     網站編輯部郵箱:[email protected] 鄂公網安備 42100202000212號 備案號:鄂ICP備16011027號-1     企業名稱:湖北國聯計算機科技有限公司