
. ویژگی جدید CSS
aspect-ratio
معرفی برای همه عنصر HTML قابلیت اندازه گیری خودکار.
.square { aspect-ratio: 1 / 1; }
.rectangle { aspect-ratio: 3 / 1; }
.video { aspect-ratio: 16 / 9; }
.ultrawide { aspect-ratio: 21 / 9; }
.intrinsicsize {
aspect-ratio: attr(width) / attr(height);
}
? بدون دارایی
aspect-ratio
، فقط برخی از عناصر دارای سیستم اندازه گیری خودکار داخلی هستند.
? به عنوان مثال ،
![]()
برچسب زمانی که حداقل مقدار عرض را به طور صریح پیکربندی شده باشد به طور ضمنی مقدار ارتفاع را محاسبه می کند و بالعکس
? اکنون ، با استفاده از نسبت ابعاد ، حتی a
می تواند مکانیزم اندازه گیری خودکار را پشتیبانی کند.
. ویژگی جدید CSS
aspect-ratio
برای ایجاد رابط های پاسخگو مفید است.
? همچنین ،
aspect-ratio
به توسعه دهندگان کمک کنید تا بهترین کارها را هنگام کار با تصاویر در وب اعمال کنند ، زیرا این امکان را می دهد تا اندازه تصویر مشخص را با استفاده از نسبت ابعاد اصلی آن با دقت بالا دستکاری کند ، که به طور موازی معیارهای عملکرد را نیز بهبود می بخشد فانوس دریایی از آنجا که شناسایی تصاویر با یک قانون تغییر اندازه اشتباه آسان خواهد بود.
⚡️
aspect-ratio
قبلاً در Chrome 88 پشتیبانی شده است. گزارش شده است که Safari به زودی برای پشتیبانی از آن تلاش می کند. Firefox و Edge …