ویژگی zoom CSS

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

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

مثال

مثال 1

برای متن استفاده کنید zoom ویژگی:

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

آزمایش کنید

مثال 2

استفاده از zoom تنظیم اندازه عنصر:

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

آزمایش کنید

زبان CSS

zoom: normal|%|number|unset|initial|inherit;

مقدار ویژگی

مقدار توضیح
normal مقدار پیش‌فرض. عنصر به صورت عادی رندر می‌شود.
%

مقیاس تغییرات مقیاس را به صورت درصد مشخص کنید.

100% = عادی.

برای بزرگ‌تر کردن، از مقادیر بیشتر از 100% استفاده کنید.

برای کوچک‌تر کردن، از مقادیر کمتر از 100% استفاده کنید.

number

مقیاس تغییرات مقیاس را به صورت عددی مشخص کنید (درصد).

1.0 = عادی.

برای بزرگ‌تر کردن، از مقادیر بیشتر از 1.0 استفاده کنید.

برای کوچک‌تر کردن، از مقادیر کمتر از 1.0 استفاده کنید.

unset مقدار تغییرات مقیاس را حذف کنید (به حالت عادی بازگردید).
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. مراجعه کنید initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض: normal
میراث‌پذیری: خیر
انیمیشن‌سازی: پشتیبانی. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: محدوده دید CSS Level 1
زبان برنامه‌نویسی JavaScript: object.style.zoom = "3"

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

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

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0