用js实现一个宽度自适应，高度随着宽度变化而变化的矩形，相信大家肯定都会。无非是js获取一下元素宽度，然后再计算出相应比例的高度，然后赋给元素，但是纯css的实现更方便些，项目中需要某div宽度百分比，随宽度的变化自适应高度等于宽度，发现使用height：calc（width），不起作用，所以想到纯css实现的办法；
html代码/css代码如下图：
我们来分析下是如何实现的，其中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定位之后，会脱离默认文档流，注意解决高度塌陷的问题。
元素，
网友评论