css默认下有一个高度,然后根据内容的填充需要自动适应内容的css写法:
div{ min-height:400pxheight:auto}
设置最小高度,也就是固定的高度。
设置高度自适应。
以此类推也可以定义最大高度,高度自适应,当内容填充超过一定程度高度将不再增加。
padding-top= (高度/宽度)*100%即图片的高度与宽度的比例,因此就能实现背景图宽度100%,高度自适应为了达到更好的效果再配合cover和center
由于margin, padding 的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width的一定比例就可以了。比如正方形:
未完待续