درک نحوه عملکرد ویژگی CSS3 Aspect-Ratio

عکس پروفایل ظهر Beto Muniz Hacker

@obetomunizبتو مونیز

نوشتن در مورد توسعه وب. من می خواهم به شما نشان دهم که وب چقدر شگفت انگیز است.

. ویژگی جدید 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 …