实现容器像素比(宽高比)

webpack config

//加入postcss插件
postcss: [
//...
require('postcss-aspect-ratio-mini')​
]

scss

//给需要实现像素比的容易定义一个伪元素
.parent{
    position: relative;
    width: 150px;
    //给元素定义像素比
    //注意这里有个bug如果直接把像素比定义在上面那群属性中会清除原有的属性
    //最好是重新写一个选择器来定义像素比属性 像这样 利用属性选择器
    &[aspect-ratio='562/560']{
        aspect-ratio: '562:560';
    };    
    &:before{
        content: ''; 
        display: block; 
        width: 1px; 
        margin-left: -1px; 
        height: 0;
    }
    //如果需要在容器中添加内容 需要在容器中增加一个元素
    //填满父元素 跟随父元素的尺寸改变 父元素则跟随宽度改变整体高宽
    .content{
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        width: 100%; 
        height: 100%;
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容