在前端开发中经常遇到背景图宽100%,高度等比例缩放的要求。如何CSS设置背景图宽度100%,高度等比例缩放?
在前端开发中经常遇到背景图宽100%,高度等比例缩放的要求。
1、js 通过计算屏幕宽度 根据图片的宽高度比例来计算高度 来调整div等标签的尺寸。
2、使用rem作为单位,提前根据款高比在css写死宽高度。
3、CSS设置背景图宽度100%,高度等比例缩放。
本文主要讲解CSS设置背景图宽度100%,高度等比例缩放的方法。
.newcenter{ width: 100%; background: url('../newcenter.png') no-repeat; background-size: 100% auto; } .newcenter:before{content: ""; display: block; padding-top: 100%;}div的高度随背景图片的高度变化:
原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比。高度设置为0.
.newcenter{ width: 100%; background: url('../newcenter.png') no-repeat; background-size: 100% auto; padding-top: 13%; height: 0px; }
上一篇: 没有了
下一篇: tif格式图片在线浏览