新11选5开奖结果 博客模板 網站素材 工具下載 建站教程 個人博客 生活咨詢 博客大全

山西新11选5最大遗漏:網頁中圖片屬性固定寬度,如何用js改變大小

新11选5开奖结果 瀏覽次數:
建華兄
微信號:S411998413 2018-05-12
后臺上傳圖片后,都有一個圖片屬性,會指定圖片的寬和高,如果圖片固定了寬度和高度,PC端用max-width可以控制最大寬度,高度自動縮放。但是手機端就沒法自動縮放,可以使用js來改變圖片的style,通過100%比例,當然也可以設置px固定的高度寬度。

新11选5开奖结果 www.qauzas.com.cn html默認樣式:

 
         <div class="news_infos" id="newsp">
          <p><img src="images/v1.jpg" style="width:300px;height:100px"></p>
        </div>

 

CSS:

 
.news_infos img { max-width: 650px;height:auto; }

 

js:

 
 <script type="text/javascript">    
      var aImg=document.getElementById("newsp").getElementsByTagName('img');
     for(var i=0;i<aImg.length;i++){
      aImg[i].style.height="100%";
      aImg[i].style.width="100%";
      }      
  </script>   

 

html更改后:

 
        <div class="news_infos" id="newsp">
          <p><img src="images/v1.jpg" style="width:100%;height:100%"></p>
        </div>
但這個方案不是很完美,如果圖片上傳的大小沒有超過650,那么PC端圖片會被放大?;褂幸恢紙餼齜槳婦褪?,編輯后臺內容的時候,將圖片屬性后面的width,height值都刪掉,讓css來控制就行了。同樣用max-width來控制圖片大小,小圖<650px,圖片不會被更改,>650px,圖片寬度就是650px。,那么手機端就用100%來表示。

 

CSS:

 
.news_infos img { max-width: 650px;height:auto; }

@media only screen and (max-width: 480px) {
    .news_infos img { width:100%; }
}

這個的不好的地方就在于,每次編輯圖片屬性,都得刪除后面的width,比較繁瑣。
以上方法,都可以實現,但是兩種方法都不完美,不知道大家有沒有更好的解決方法?

 


轉載請注明本文轉自建華兄個人博客//www.qauzas.com.cn/jzjs/84.html
熱門排行