HTMLPLUS

Aspect Ratio

This component helps to specify a fixed ratio for the width and height sizes of a visual object (e.g. Image).

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusAspectRatio

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
value
Type
number | stringnumber | string
Specifies the ratio.
Name
default
The default slot.

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
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;
}

PreviewScriptStylesandboxEdit on CodeSandbox
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;

PreviewScriptStylesandboxEdit on CodeSandbox
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 }
Contributors
Prev
Browser support
Next
Breadcrumb
SELECT YOUR FRAMEWORK
React logo
React