سی ایس ایس اپسیئن ریشیو خاصیت

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

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

اگر تناسب اندازه و عرض این ویژگی، ارتفاع بر اساس تناسب اندازه تعیین می‌شود.

برای درک بهتر تناسب اندازه این ویژگی را ببینید:

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

مثال

مثال 1

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

div {
  تناسب اندازه: 3 / 2;
}

آزمایش کنید:

مثال 2

اگر اندازه div عناصر نیاز به تغییر داشته باشد،تناسب اندازه این ویژگی بسیار مناسب برای کنترل تناسب اندازه 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: اعداد/اعداد|مقدار اولیه|وراثت;

مقدار ویژگی

مقدار توضیح
اعداد عدد اول مقدار عرض رابطه تناسب اندازه‌گیری می‌شود.
اعداد

عدد دوم مقدار ارتفاع رابطه تناسب اندازه‌گیری می‌شود.

اختیاری. اگر تنظیم نشود، مقدار پیش‌فرض ارتفاع 1 است.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: مقدار اولیه.
وراثت این ویژگی را از عنصر والد خود ارث می‌برد. ببینید: وراثت.

جزئیات فنی

مقدار پیش‌فرض: 자동
وراثت: خیر
انیمیشن ساخت: پشتیبانی می‌شود. لطفاً ببینید:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
آموزش نحوه استفاده از زبان: object.style.aspectRatio="16/9"

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

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

کروم ایج فایرفاکس سافاری اُپرا
88 88 89 15 74

صفحات مرتبط

آموزش:CSS گرید لائج کا مودول

مطالعه کنید:CSS Object-fit کا کیمپٹ

مطالعه کنید:CSS Object-position کا کیمپٹ