Aspect Ratio

import React from "react";
import { AspectRatio, Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <AspectRatio value="16/9">      
      <Card tile>
        This box will always be 16/9 (unless you put more stuff in it)
      </Card>      
    </AspectRatio>    
  </>;
};

export default App;

plus-card {
  --plus-card-background-color: #C5CAE9;
  padding: 1rem;
}

import React from "react";
import { AspectRatio } from "@htmlplus/react";

const App = () => {
  return <>    
    <AspectRatio value="16/9">      
      <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>      
    </AspectRatio>    
  </>;
};

export default App;

import React from "react";
import { Grid, AspectRatio } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item xs="12" sm="6">        
        <Grid>          
          <Grid.Item xs="12">            
            <AspectRatio value="3/2" className="ratio-one">              
              <div className="box one">
                3/2
              </div>              
            </AspectRatio>            
          </Grid.Item>          
          <Grid.Item xs="12">            
            <AspectRatio value="16/9">              
              <div className="box two">
                16/9
              </div>              
            </AspectRatio>            
          </Grid.Item>          
        </Grid>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6">        
        <Grid>          
          <Grid.Item xs="6">            
            <AspectRatio value="1">              
              <div className="box three">
                1/1
              </div>              
            </AspectRatio>            
          </Grid.Item>          
          <Grid.Item xs="6" alignSelf="end">            
            <AspectRatio value="4/3">              
              <div className="box four">
                4/3
              </div>              
            </AspectRatio>            
          </Grid.Item>          
          <Grid.Item xs="12">            
            <AspectRatio value="18/6">              
              <div className="box five">
                18/6
              </div>              
            </AspectRatio>            
          </Grid.Item>          
        </Grid>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;

.box {
  color: white;
  padding: 0.75rem;
  margin: 0.25rem;
}
.ratio-one {
  width: 40.625%;
  float: right;
}
.one   { background: #08DFC8 }
.two   { background: #FF5449 }
.three { background: #5F9EE9 }
.four  { background: #FFC903 }
.five  { background: #9073C1 }