css实现等比例缩放的小技巧

作者: wxfeng 分类: web前端 发布时间: 2017-04-24 00:00

在做响应性布局的时候,为了自适应不同大小分辨率的设备屏幕,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图片等高度100%的时候并不生效,图片没有显示出来,因为没有设置具体的高度值,浏览器渲染的时候并没有高度。这里需要运用一个小技巧即可实现,padding用百分比做单位时是相对于容器的宽度来算的,所以你可以把高度设为0,内容自然溢出,设置个padding-bottom,如:

height:0; 
width:50%;
padding-bottom:30%

那么这个div的高宽比就是30%:50%,这样就实现了高度和宽度的等比例缩放

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注