元素等比缩放解决方案

Posted 2021-01-07 yy95

一、元素等比缩放解决方案

<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、百分比，相对于父元素的宽度。