超实用等比盒子

/**
 * 等比例盒子
 */

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;
  }
}