CSS приклад: zoom

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 6.0+ 4.0+

Коротка інформація

Значення за замовчуванням normal
Наслідується Ні
Застосовується До всіх елементів

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Змінює масштаб об'єкта відповідно до вказаного значення.

Синтаксис

zoom: <значення> | <відсотки> | normal

Значення

значення
Число з рухомою комою, значення 1.0 відповідає normal. Значення більше 1.0 збільшують масштаб об'єкта, значення менше 1.0 зменшують масштаб.
відсотки
Ціле число, задане в відсотках. Вказує зміну масштабу відносно 100%, що відповідає значенню normal.
normal
Об'єкт має початковий масштаб.

Приклад

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>zoom</title>
  <style>
   .zoom:hover { zoom: 3; }
  </style>
 </head> 
 <body>
  <p><img src="images/ru.png" alt="RU" class="zoom">
     <img src="images/com.png" alt="COM" class="zoom"></p>
 </body>
</html>

У цьому прикладі масштаб зображення збільшується у три рази при наведенні на нього курсора миші.

Об'єктна модель

[window.]document.getElementById("elementID").style.zoom

Браузери

Браузер Internet Explorer з версії 8.0 також розуміє властивість -ms-zoom.

Часті запитання

  • Q: Як використовувати zoom в CSS?

    A: Для використання zoom в CSS можна встановити значення властивості zoom для елемента, наприклад: .element { zoom: 2; }

  • Q: Де можна використовувати zoom в CSS?

    A: Zoom в CSS можна використовувати для збільшення або зменшення масштабу елементів на сторінці.

  • Q: Чи підтримується властивість zoom у всіх браузерах?

    A: Властивість zoom у CSS підтримується в браузерах Internet Explorer версії 5.5+ і Edge.

  • Q: Як використовувати CSS zoom для збільшення тексту?

    A: Для збільшення тексту за допомогою zoom в CSS, можна встановити значення zoom для текстового елемента.

  • Q: Чи можна анімувати zoom в CSS?

    A: Zoom в CSS не є анімованою властивістю, але можна застосувати анімації до елементів, які мають властивість zoom.