超实用等比盒子

/**
 * 等比例盒子
 */

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 = ({ ratio, className, style, children }) => (
  

    
{children}
  
)

export default IBox

.ibox {
  position: relative;

  &__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}