画正方形

画正方形

实现一个正方形,拖拽窗口,正方形等比例缩放

vw

<div class="square">
    <h1>This is a Square</h1>
</div>
.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}

.square h1 {
    color: #fff;
}

padding-bottom

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
	<div>
	    Content goes here
	</div>
</div>

参考

  • [How to style a div to be a responsive square?(https://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square)