AspectRatio

Description

A Box that takes a certain aspect ratio and fits img, picture, video and canvas tags inside it using object-fit: cover;.

Demo

import { AspectRatio } from "@neui/layout";

Live Editor

function AspectRatioDemo() { const StyledAspectRatio = styled(AspectRatio, { borderRadius: 10, overflow: "hidden", backgroundColor: "gray", }); return ( <StyledAspectRatio aspectRatio={{ base: "4 / 3", md: "16 / 9" }}> <img src="https://images.unsplash.com/photo-1530555252281-cd591983ab3e?ixlib=rb-4.0.3&ixid=MnwxM/photo-1530555252281-cd591983ab3ejA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="Unsplash Photo of a grill" /> </StyledAspectRatio> ); }

function AspectRatioDemo() {
  const StyledAspectRatio = styled(AspectRatio, {
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: "gray",
  });

  return (
    <StyledAspectRatio aspectRatio={{ base: "4 / 3", md: "16 / 9" }}>
      <img
        src="https://images.unsplash.com/photo-1530555252281-cd591983ab3e?ixlib=rb-4.0.3&ixid=MnwxM/photo-1530555252281-cd591983ab3ejA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
        alt="Unsplash Photo of a grill"
      />
    </StyledAspectRatio>
  );
}

Result

Loading...

Props

CSS Prop	Extends	RenderAs Prop	Renders by default
	Box		Box

Name	CSS Rule(s)	Description
aspectRatio	aspect-ratio	Sets the component's aspect ratio