利用css怎样实现宽和高的比例是1:1

html-css0111

利用css怎样实现宽和高的比例是1:1,第1张

css3有两个新单位，vw和vh,vw表示占用父元素宽度的百分比，vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。不过有个bug，就是现在浏览器对css3的支持度不是很大，有些浏览器不支持

我用js实现的，css貌似实现不了吧，反正我没思路

<!DOCTYPE html>

<html>

<head>

<title>div_height_equal_width</title>

<style type="text/css">

#div1{

width:50%

background-color:lavender

margin:0 auto

}

</style>

<script type="text/javascript">

window.onload = function(){

var div1 = document.getElementById("div1")

var width = div1.offsetWidth

div1.style.height = width+"px"

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>