🔹 Aspect Ratio چیه؟

Aspect Ratio یعنی نسبت عرض به ارتفاع یه عنصر (مثل عکس یا ویدیو).
مثال:

• 16:9 → برای ویدیوها

• 1:1 → مربع

• 4:3 → عکس‌های کلاسیک

با استفاده از پلاگین Aspect Ratio توی Tailwind خیلی راحت میشه این نسبت‌ها رو کنترل کرد.

🔹 نصب پلاگین Aspect Ratio

اگه توی نسخه جدید Tailwind (v3.0 به بالا) باشی، پلاگین به صورت پیش‌فرض وجود داره.
ولی اگه قدیمی‌تر باشه:

npm install @tailwindcss/aspect-ratio

📌 و توی tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

🔹 استفاده ساده از کلاس‌ها

مثال برای مربع (1/1):

<div class="aspect-w-1 aspect-h-1">
  <img src="image.jpg" alt="Square" />
</div>

مثال برای ویدیو (16/9):

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

🔹 استفاده از کلاس آماده aspect-auto

اگه بخوای مرورگر خودش Aspect Ratio رو هندل کنه:

<div class="aspect-auto">
  <img src="photo.jpg" />
</div>

🔹 استفاده از aspect-[n/m] (Tailwind 3.0+)

توی نسخه‌های جدیدتر میشه مستقیم نوشت:

<div class="aspect-[4/3]">
  <img src="landscape.jpg" />
</div>

یا:

<div class="aspect-[21/9]">
  <video src="movie.mp4"></video>
</div>

🔹 نکته مهم

• توی Grid و Flexbox هم خیلی کاربرد داره (مثلاً کارت‌های گالری).

• توی نسخه جدید Tailwind راحت‌ترین راه استفاده از aspect-[ratio] هست.

• به جای دستکاری height/width دستی، از aspect ratio استفاده کن تا ریسپانسیوتر باشه.