<!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）
扫一扫
2564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
