react-ratio-view v0.1.0

react-ratio-view

make children view fit width and height, and keep ratio

You only need to make children fit width. then it will also fit height. it will limit the width when height is not enough.

中文说明： 让子元素根据父元素范围保持长宽比的组件。

你只需要让子元素适应width变化，它就能也适应height。 原理是当高度不够的时候，这个组件会限制长度。

use:

import RatioView from "react-ratio-view";

function SomeComp() {
  return (
    <div>
        <RatioView ratio={16 / 9}>
          <div className="some-inner">
            xxx
          </div>
        </RatioView>
    </div>
  );
}

export default SomeComp;