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.
Select your desired component from below and see the available properties, slots, events, styles and methods.
Below is a collection of simple to complex examples.
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 }