- Components
- aspect-ratio
Aspect Ratio
Set the aspect ratio of a container using CSS.
Demo
import { AspectRatio } from '@/components/jk/aspect-ratio'
export const DemoAspect = () => {
return (
<AspectRatio aspect="video">
<img src="/images/img2.webp" className="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu" />
</AspectRatio>
)
}Installation
terminal
npx shadcn@latest add @jk-ui/aspect-ratioExamples
Standard TV
import { AspectRatio } from "@/components/jk/aspect-ratio"
export const AspectStandardTv = () => {
return (
<AspectRatio aspect="standard-tv">
<img src="/images/img2.webp" className="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu" />
</AspectRatio>
)
}
Square
import { AspectRatio } from "@/components/jk/aspect-ratio"
export const AspectSquare = () => {
return (
<AspectRatio aspect="square">
<img src="/images/img2.webp" className="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu" />
</AspectRatio>
)
}
Ultra Wide
import { AspectRatio } from '@/components/jk/aspect-ratio'
export const AspectUltraWide = () => {
return (
<AspectRatio aspect="standard-tv">
<img src="/images/img2.webp" className="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu" />
</AspectRatio>
)
}
MM Film
import { AspectRatio } from '@/components/jk/aspect-ratio';
export const AspectMmFilm = () => {
return (
<AspectRatio aspect="35mm-film">
<img src="/images/img2.webp" className="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu" />
</AspectRatio>
);
}