只利用css做到屏幕resize时，保持元素宽高比例

背景图片宽高比

两种情况：

• 你要的图片最宽固定，假如最宽300px,屏幕再大,图片的宽度也就300px，那我们要做的就是屏幕宽度小于300时，保持宽高比：

    


div p {
    width:600px;
    padding-top: 35%;
    background:url('./images/ulike.png') no-repeat;
    background-size:contain;
}

宽度固定值时，background-size只能是contain！

• 屏幕多大， 图片都要跟着有变化，那自然想到宽度就是百分比了。

    


div p {
    width:30%;
    padding-top: 35%;
    background:url('./images/ulike.png') no-repeat;
    background-size:cover;
}

宽度固定值时，background-size是contain或cover都可以 ！
在默认的水平文档流方向下，css 的margin和padding属性的垂直方向的百分比都是相对于父元素宽度计算的，和top，bottom不同。

div { padding: 50%; }
或者：

div { padding: 100% 0 0; }
或者：

div { padding-bottom: 100%; }
则这个

元素尺寸就是一个宽高1:1的正方形，无论其父容器宽度是多少，这个

元素总能保持比例不变。

一个不太好的方式：图片的宽度100%，高度自适应。但是这个过程中布局一直在重绘， 不可取。

div 宽高比

  



.parent {
    width: 50%;
    padding: 20% 0 0;
    position: relative;
    background: darkseagreen;
}

div div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: pink;
}

parent 设置paddingtop,想要子元素的高度是多少，就设置多少，padding-top的值等于子元素的高度。（只适用于百分比）