首页 > 代码库 > div响应式等比缩放实现
div响应式等比缩放实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式 div等比缩放</title>
<link rel="stylesheet" href="http://www.mamicode.com/materialize.css">
<script src="http://www.mamicode.com/jquery.min.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/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。
图1，（页面宽度1100px，div占页宽1/3）
图2，（页面宽度1100px，div占页宽1/2）
图3，（页面宽度500px，div占页宽1/1）
div响应式等比缩放实现