<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>響應式div等比縮放</title>
</head>
<body>
<div style="width:20%;height:0;padding-bottom:20%;background-color:#ccc;">不使用ui框架的div響應式等比縮放</div>
</body>
</html>
-----------------------------分割線下面部分代碼為使用bootstrap等ui框架的實現代碼-----------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>響應式 div等比縮放</title>
<link rel="stylesheet" href="materialize.css">
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m6 l4">
<ul data-collapsible="accordion" style="width:100%;box-shadow:none;" class="collapsible">
<li style="width:100%;">
<div style="position:relative;text-align:center;width:100%;height:0;padding-bottom:100% !important;" class="collapsible-header">
<div style="position:absolute;bottom:30px;left:50%;z-index:10;margin-left:-30px;width:60px;height:24px;color:#333;text-align:center;">
查看詳情
</div>
<div style="position:absolute;left:0;bottom:0;width:100%;height:100%;padding:30%;padding-top:25%;overflow:hidden;">
<img src="aaa.svg" class="responsive-img"></div>
</div>
<div style="padding:6px;" class="collapsible-body">
<div style="height:2rem;line-height:2rem;">
<span>文字</span>
</div>
<hr>
<div style="height:184px;overflow:scroll;">
<p>文字文字文字...</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
說明：materialize是與bootstrap一樣的響應式框架，依賴jquery。任何頁面寬度下此div寬高比始終1:1（下面為使用ui框架的效果截圖）
圖1， 大屏幕下（頁面寬度1100px，div占頁寬1/3）
圖2，中等屏幕下（頁面寬度800px，div占頁寬1/2）
圖3，小屏幕下（頁面寬度500px，div占頁寬1/1）
