next-image-aspect-ratio
v1.0.5
Published
Responsive aspect ratio component by using NextJs Image Component
Downloads
8
Readme
next-image-aspect-ratio
next-image-aspect-ratio
is a React component designed to work within Next.js projects to provide an easy and effective way to manage image aspect ratios. This component automatically calculates the aspect ratio based on the provided width and height and ensures the image fills its container without distortion.
Features
- Easy Integration: Seamlessly integrates with Next.js projects.
- Responsive Design Support: Maintains the aspect ratio of images to ensure they adapt to different device screens without distortion.
- Full Compatibility: Accepts all image properties available in Next.js's
Image
component. - Customizable Width: Allows customization of the maximum width through a simple prop.
Installation
To install the package, you can use npm or Yarn. Run one of the following commands in the root directory of your Next.js project:
npm install next-image-aspect-ratio
Or
yarn add next-image-aspect-ratio
Usage
Here's a complete example of how to use the NextImageAspectRatio
component within a functional React component in a Next.js project:
import React from "react";
import NextImageAspectRatio from "next-image-aspect-ratio";
function ImageDisplayComponent() {
return (
<NextImageAspectRatio
src="/path/to/image.jpg"
width={1920}
height={1080}
alt="Descriptive alt text for accessibility"
/>
);
}
export default ImageDisplayComponent;
Props
Here are the props you can pass to NextImageAspectRatio
:
| Property | Type | Required | Default | Description |
| ---------- | ------------------ | -------- | -------- | ---------------------------------------------------------- |
| src
| string
| Yes | None | URL of the image. |
| width
| string \| number
| Yes | None | The original width of the image. |
| height
| string \| number
| Yes | None | The original height of the image. |
| alt
| string
| Yes | None | Descriptive text for the image, crucial for accessibility. |
| maxWidth
| string
| No | "100%"
| The maximum width of the image container. |
Additionally, NextImageAspectRatio
supports all the properties that are available to the Next.js Image
component, allowing you to use optional properties such as priority
, placeholder
, blurDataURL
, and more for enhanced image handling and performance.