一、元素等比縮放解決方案

<style>
			 /*等比縮放*/
			        .box{
					position: relative;
					width: 50%;		/* desired width */
					background: #000;
					color: #fff;
				}
				.box:before{
					content: "";
					display: block;
					padding-top: 100%; 	
					background: #f00;
				}
				.content{
					position:  absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
				}
		</style>
	
	
		<div class=‘box‘> 
		      <div class=‘content‘>1:1</div> 
	        </div>

　包含內容的元素使用絕對定位布局，利用元素的padding的百分比屬性去設置元素的高度。

padding可以設置的值：

1、長度，非負的固定寬度

2、百分比，相對於父元素的寬度。

元素等比縮放解決方案