html根據寬的百分比設定高
阿新 • • 發佈：2018-12-23
最近在團隊中開發了一部分html頁面
有一個功能點，需要在一行展示三張圖片，每張圖片拉伸成正方形。
對於圖片的寬設定為33%就可以了，但是怎麼讓高度根據寬度變化呢？最初想到的是在頁面生成後使用js來獲取圖片寬，再根據這個獲取的寬設定圖片的高。
程式碼如下：
$(function(){
var imgs=$('.view_img')
for(var i=0;i<imgs.length;i++){
imgs[i].style.height=imgs[i].offsetWidth+'px';
}
}) 在手機web中，不拉伸頁面大小其實這樣做是可以了的。
但是如果在pc段的頁面中檢視，拉伸下頁面，圖片的高度是不會跟著寬度變化的。
查看了點資料，原來直接使用css樣式也是可以做到寬按父元件的百分比設定，高根據寬的百分比設定的。
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>根據寬的百分比設定高</title> </head> <style> /*關鍵樣式*/ .container{ width:20%; position:relative; display: inline-block; } .scale_100{ margin-top: 100%;#取巧用這個來調整container的高，將container撐高 } .scale_75{ margin-top: 75%;#取巧用這個來調整container的高，將container撐高 } .content{ position:absolute; top:0; right:0; bottom:0; left:0; border:solid; border-color:red; margin:5px; } /*無關樣式*/ .split_line{ border:dotted; border-color:green; margin:5px } </style> <body> <h2>根據寬的百分比設定高</h2> <div class="split_line"></div> <div class='container'> <div class='scale_100'></div> <img style="width:100%; height:100%;position:absolute; left:0; top:0;" src="http://www.xxjxsj.cn/article/UploadPic/2009-10/2009101018545196251.jpg"></img> </div> <div class="split_line"></div> <div> <div class='container'> <div class='scale_75'></div> <div class='content'> <img style="width:100%; height:100%;" src="http://news.51sheyuan.com/uploads/allimg/111001/133442IB-2.jpg"></img> </div> </div> <div class='container'> <div class='scale_75'></div> <div class='content'><img style="width:100%; height:100%;" src="http://news.51sheyuan.com/uploads/allimg/111001/133442IB-2.jpg"></img></div> </div> </div> </body> </html>
主要是利用margin-top的百分比是根據父元件的寬來計算的，這一原理。
然後取巧利用margin-top將div撐到指定百分比的高度。