خصوصیت aspect-ratio CSS

تعریف و استفاده

aspect-ratio این ویژگی به شما اجازه می‌دهد تا نسبت عرض و ارتفاع عنصر را تعریف کنید.

اگر aspect-ratio و عرض این ویژگی، ارتفاع بر اساس نسبت عرض و ارتفاع تعیین می‌شود.

برای بهتر درک aspect-ratio این ویژگی، لطفاً به نمایشگاه مراجعه کنید.

توجه:در چیدمان‌های پاسخگو استفاده شود aspect-ratio این ویژگی، زمانی که اندازه عنصر به طور مداوم تغییر می‌کند، شما می‌خواهید نسبت عرض و ارتفاع را حفظ کنید.

مثال

مثال 1

برای عنصر اضافه کردن نسبت عرض و ارتفاع:

div {
  aspect-ratio: 3 / 2;
}

آزمایش کنید:

مثال 2

اگر اندازه عنصر div نیاز به تغییر داشته باشد،aspect-ratio این ویژگی بسیار مناسب برای کنترل نسبت عرض و ارتفاع عنصر div است. به عنوان مثال، در یک مجموعه عکس‌ها، شما می‌خواهید اندازه عنصر div به صورت انعطاف‌پذیر باشد تا با تمام دستگاه‌ها سازگار باشد، اما همچنان نسبت عرض و ارتفاع عکس‌ها حفظ شود:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>کوی</div>
  <div>گل‌ها در کنار خیابان</div>
  <div>کوه‌ها</div>
  <div>Cinque Terre</div>
</div>

آزمایش کنید:

نحوه استفاده از CSS

aspect-ratio: اعداد/اعداد|initial|inherit;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

صفحات مرتبط

تدریس:بخش شبکه‌بندی CSS

منابع:خصوصیت Object-fit CSS

منابع:خصوصیت Object-position CSS