论坛

标题: div长宽等比例缩放 [打印本页]

作者: 邢越 时间: 2017-12-29 08:39
标题: div长宽等比例缩放
请问js里面怎样设置一个div的宽为25%后，

再设置高为宽的75%，填充颜色后得到一个四比三的色块。然后随着屏幕宽度缩小色块的长宽比始终保持四比三。

作者: lori棒棒糖 时间: 2017-12-29 17:43
本帖最后由 lori棒棒糖于 2017-12-29 17:50 编辑

<html>
<head>
<script type="text/javascript" src="file:///http://sta.qinxue.com/js/jquery-1.7.1_min.js

"></script>
<style>
.box01{ background: #ff0000; width: 25%;}
</style>
</head>

<body>
<div class="box01"> </div>
<script type="text/javascript">
//初始化
var BOXWidth = $(".box01").width() * 0.75; //获取75%的宽度值
$(".box01").css("height",BOXWidth); //赋值给高

//当文档窗口发生改变时触发
$(window).resize(function(){
$(".box01").height($(".box01").width() * 0.75);
});
</script>
</html>

欢迎光临论坛 (http://bbs.qinxue.com/)