/**
* 等比例盒子
*/
import classNames from 'classnames'
import type { CSSProperties } from 'react'
import React from 'react'
import './index.less'
interface IBoxProps {
ratio: number
className?: string
style?: CSSProperties
}
const percentage = (n: number) => `${n * 100}%`
const IBox: React.FC<IBoxProps> = ({ ratio, className, style, children }) => (
<div
className={classNames('ibox', className)}
style={{ ...style, paddingTop: percentage(ratio) }}
>
<div className="ibox__content">{children}</div>
</div>
)
export default IBox
.ibox {
position: relative;
&__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
}
