纯css实现页面元素宽高等比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会。无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但是纯css的实现更方便些,项目中需要某div宽度百分比,随宽度的变化自适应高度等于宽度,发现使用height:calc(width),不起作用,所以想到纯css实现的办法;


html代码/css代码如下图:


纯css实现页面元素宽高等比例缩放_第1张图片

      我们来分析下是如何实现的,其中div容器包含两个元素dummy和content,dummy是个空div,而content是我们正真要实现宽高等比例缩放的元素,div是块元素,宽度会随其内容而撑开,所以只要让高度随宽度变化就行,不使用js的前提下,就是依赖dummy元素的属性margin-top:100%来实现,margin-top的百分比是以父元素div的宽度为基准,设置其为100%,则留出的高度就和div的宽度一样,再设置content的定位到div上覆盖div即可实现其高度随宽度的百分比而变化;


      此时content就是一个高度随着宽度变化的正方形,当然设置margin-top为75%,就是一个宽高比为4:3的长方形,但是使用时要注意,content定位absolute定位之后,会脱离默认文档流,注意解决高度塌陷的问题。


元素,

你可能感兴趣的:(纯css实现页面元素宽高等比例缩放)