git.iko.soy/bridge
on master help sign in
bridge/src/components/AspectRatio.jsx
22 lines 602 B history raw
1import React from 'react';
3/**
4 * A very useful Flutter widget reimplemented with
5 * the world's dumbest css hack.
6 *
7 * Simply: container div with appropriate relative padding,
8 * then absolutely pin the child.
9 *
10 * via: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
11 */
12export default function AspectRatio({ aspectRatio = 1, children }) {
13 const percent = `${(1 / aspectRatio) * 100}%`;
15 return (
16 <div className="rel" style={{ paddingTop: percent }}>
17 <div className="abs" style={{ top: 0, bottom: 0, left: 0, right: 0 }}>
18 {children}
19 </div>
20 </div>
21 );