react 比例容器

最新推荐文章于 2023-10-04 21:40:09 发布

快乐g的小猫

最新推荐文章于 2023-10-04 21:40:09 发布

阅读量262

点赞数 1

分类专栏： react前端开发 js 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45872877/article/details/126223068

版权

react前端开发同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

react 等比例容器

利用margin 100%去实现比例容器也可使用padding，传入想要的宽高比后展现结果

实现

//等比例组件
export function EqualProportionSpan({ w, h, children }) {
    const style = {
        marginTop: w && h ? `${(h / w) * 100}%` : "100%"
    }
    return <div className="equal-proportion">
        <div className="equal-proportion-body">
            {
                children
            }
        </div>
        <div style={style} />
    </div>
}

css

//兼容等比例
.equal-proportion {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.equal-proportion.equal-proportion-body {
    position: absolute;
    height: 100%;
    width: 100%;
    }

使用实例

function App(props) {
    return <div style={{maxWidth:"500px",maxHeight:"500px"}}>
        <EqualProportionSpan w={15} h={10}>
            <div style={{width:"100%",height:"100%",backgroundColor:"red"}}>

            </div>
        </EqualProportionSpan>
    </div>
}