zoom

zoom

Нестандартный: эта функция нестандартна и не входит в стандартную дорожку. Не используйте его на рабочих сайтах, выходящих в Интернет: он подойдет не для всех пользователей. Между реализациями также может быть большая несовместимость, и поведение может измениться в будущем.

CSS -свойство нестандартного zoom можно использовать для управления уровнем увеличения элемента. transform: scale() следует использовать вместо этого свойства, если это возможно. Однако, в отличие от преобразований CSS, zoom влияет на размер макета элемента. transform: scale() zoom

Syntax

/ * Значения ключевых слов * / zoom: normal; zoom: reset; / * значения * / zoom: 50%; zoom: 200%; / * значений * / zoom: 1.1; zoom: 0.7; / * Глобальные значения * / zoom: inherit; zoom: initial; zoom: revert; zoom: revert-layer; zoom: unset;

Values

Отправьте этот элемент в нормальном размере.

Не следует (де)увеличивать этот элемент,если пользователь применяет не дюймовое масштабирование (например,при нажатии на кнопку Ctrl — — or Ctrl + + клавиатурные сокращения)к документу.Поддерживается только WebKit (и,возможно,Blink).

Коэффициент увеличения 100% эквивалентно normal . Значения, превышающие 100% , увеличивают. Значения, меньшие, чем 100% , уменьшают .

Коэффициент увеличения Эквивалентен соответствующему проценту ( 1.0 = 100% = normal ). Значения больше 1.0 увеличивают. Значения меньше 1.0 уменьшают .

Formal definition

Источник

zoom

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

Syntax

/* Keyword values */ zoom: normal; zoom: reset; /* values */ zoom: 50%; zoom: 200%; /* values */ zoom: 1.1; zoom: 0.7; /* Global values */ zoom: inherit; zoom: initial; zoom: revert; zoom: revert-layer; zoom: unset; 

Values

Render this element at its normal size.

Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl — — or Ctrl + + keyboard shortcuts) to the document. Do not use this value, use the standard unset value instead.

Zoom factor. 100% is equivalent to normal . Values larger than 100% zoom in. Values smaller than 100% zoom out.

Zoom factor. Equivalent to the corresponding percentage ( 1.0 = 100% = normal ). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.

Formal definition

Источник

zoom

Свойство zoom изменяет масштаб элемента. Если меньше 1 или 100%, то элемент уменьшится. А если больше 1 или 100%, то элемент увеличится.

На данный момент не поддерживается в FireFox. Проверяйте поддержку на Can I use.

Пример

Скопировать ссылку «Пример» Скопировано

 При наведении текст уменьшается на 50% Сохраняется исходный размер текста При наведении текст увеличивается в 2 раза p class="small-text">При наведении текст уменьшается на 50%p> p class="normal-text">Сохраняется исходный размер текстаp> p class="big-text">При наведении текст увеличивается в 2 разаp>    Скопировать Скопировано Не удалось скопировать   

 .small-text:hover  zoom: 50%;> .normal-text:hover  zoom: normal;> .big-text:hover  zoom: 2;> .small-text:hover  zoom: 50%; > .normal-text:hover  zoom: normal; > .big-text:hover  zoom: 2; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У zoom есть четыре значения:

• normal — задаёт элементу исходный масштаб. Значение по умолчанию.
• число — коэффициент масштабирования. 1.0 эквивалентно значению normal .
• процент — процентное значение. 100% эквивалентно значению normal .
• reset — не изменяет масштаб элемента, если пользователь применяет к документу масштабирование без сведения (разведения) пальцев, т. е. масштабирование, применимое к сенсорным интерфейсам. Это нестандартное значение, перед его использованием следует проверить поддержку на Can I use.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Значение свойства не наследуется.

💡 Применимо ко всем элементам.

💡 Свойство можно анимировать.

Источник

zoom

Изменяет масштаб объекта согласно заданному значению.

Это нестандартное свойство, вместо него используйте transform.

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

Синтаксис

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

<число>Число с плавающей запятой, значение 1.0 соответствует normal . Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб. Целое число, заданное в процентах. Указывает изменение масштаба относительно 100%, которое соответствует значению normal . normal Объект имеет исходный масштаб.

Пример

.zoom:hover

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Источник

CSS свойства zoom

Свойство zoom используется для изменения масштаба контента. Свойство transform имеет значение «scale()», которое также может быть использовано для изменения масштаба вместо свойства zoom .

Значение по умолчанию	normal
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Да
Версия	Safari CSS Reference.
DOM синтаксис	object.style.zoom = «4»;

Синтаксис

zoom: normal | number | percentage | reset | initial | inherit;

Пример

html> html> head> title>Заголовок документа title> style> div.element< width: 30px; height: 30px; border-radius: 50%; text-align: center; vertical-align: middle; display: inline-block; zoom: 2; > div#grey< background-color: #666; zoom: normal; > div#blue< background-color: #1c87c9; zoom: 300%; > div#green< background-color: #8ebf42; zoom: 5; > style> head> body> h2>Пример свойства zoom h2> div id="grey" class="element"> div> div id="blue" class="element"> div> div id="green" class="element"> div> body> html>

Значения

Значение	Описание
normal	Указывает нормальный размер элемента.
number	Коэффициент масштабирования. Равен соответствующему проценту (1.0 = 100% = normal). Значения больше 1.0 увеличивают. Значения меньше 1.0 уменьшают.
percentage	Указывает значение в процентах. 100% равен значению normal.
reset	Не увеличивает элемент, если пользователь применяет к документу non-pinch-based масштабирование.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

Поддержка браузера

Источник