The AspectRatio component ensures that an element maintains a specific width-to-height ratio. This is especially useful for responsive images, videos, or other content that needs to scale proportionally.
<?php
use Lib\PHPXUI\AspectRatio;
?>
<AspectRatio ratio="16 / 9" class="bg-muted rounded-lg">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
fill="true"
class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
/>
</AspectRatio>
Installation
npm
npx phpxui add Aspect Ratio
Usage
use Lib\PHPXUI\{
AspectRatio,
}<AspectRatio ratio="16 / 9">
<img src="..." alt="Image" class="rounded-md object-cover" />
</AspectRatio>