What does css zoom do

document.querySelector('#sel-jsz').style.zoom = 4; 

#sel-001 zoom: 2.5; > #sel-002 zoom: 5; > #sel-003 zoom: 300%; > 

id="sel-000">IMG - Default
 
id="sel-001">IMG - 1X
 
id="sel-002">IMG - 5X
 
id="sel-003">IMG - 3X
 
id="sel-jsz">JS Zoom - 4x
 

 div < zoom: 200% > div style=”zoom: 200%”>This is x2 text

Solution 5 — Css

zoom is a css3 spec for the @viewport descriptor, as described here

used to zoom the entire viewport (‘screen’). it also happens to zoom individuals elements in a lot of browsers, but not all. css3 specifies transform:scale should be used to achieve such an effect:

but it works a little different than the ‘element zoom’ in those browsers that support it.

Solution 6 — Css

Only IE and WebKit support zoom, and yes, in theory it does exactly what you’re saying.

Try it out on an image to see it’s full effect 🙂

Solution 7 — Css

As Joshua M pointed out, the zoom function isn’t supported only in Firefox, but you can simply fix this as shown:

div.zoom < zoom: 2; /* all browsers */ -moz-transform: scale(2); /* Firefox */ > 

Источник

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.

Подсказки

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

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

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

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

Источник

What Does ‘Zoom’ Do in CSS

Zoom is not included in the CSS specification, but it is supported in IE, Safari 4, Chrome (and you can get a somewhat similar effect in Firefox with -moz-transform: scale(x) since 3.5). See here.

will zoom your object in by 2, so it’s like doubling the size. Which means if you have

Like I say, in FireFox 3.5+ use -moz-transform: scale(x) , it does much the same thing.

Edit: In response to the comment from thirtydot , I will say that scale() is not a complete replacement. It does not expand in line like zoom does, rather it will expand out of the box and over content, not forcing other content out of the way. See this in action here. Furthermore, it seems that zoom is not supported in Opera.

This post gives a useful insight into ways to work around incompatibilities with scale and workarounds for it using jQuery.

What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?

Zooming as implemented in modern browsers consists of nothing more
than “stretching up” pixels. That is, the width of the element is not
changed from 128 to 256 pixels; instead the actual pixels are doubled
in size. Formally, the element still has a width of 128 CSS pixels,
even though it happens to take the space of 256 device pixels.

In other words, zooming to 200% makes one CSS pixel grow to four times
the size of one device pixels. (Two times the width, two times the
height, yields four times in total).

Source:
Concept of device pixels and CSS pixels

What does *zoom:1 do in bootstrap?

It’s like an inline conditional statement for IE5.5 — IE7. Only IE 5.5, IE6, and IE7 will display zoom: 1 because of the inline * (known as the «star property hack»). Similar to the IE6 hack with the underscore _ .

Zoom Vs. Scale in CSS3

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers.

example:
position:absolute; left:50px; zoom: 50%;

• IE will not change the left value at all.
• Chrome will change the left value to 25px . Effectively it does do left = left * zoom . But DevTools Computed Values in DevTools will still display left: 50px , even though that is effectively not true due to the zoom.

Transform is handled the same way in all browsers (as far as I can tell).

example:
position:absolute; left:50px; transform: scale(0.5)

• left would effectively be set to 25px in both Chrome and IE. (again, computed values will still not reflect this, it will display left:50px )
• To avoid changing the left value, simply use transform-origin: 0 0 . That will ensure left is still 50px.

Demo: http://jsfiddle.net/4z728fmk/ shows 2 boxes where the small one is zoomed or scaled to 50%. Looks like this:

edit: img updated 2016-06-16 with Firefox (nothing had change in Chrome or IE since last time)

CSS zoom property

The CSS3 equivalent is in the CSS 2D Transforms module, in particular transform: scale() .

Because this module is still at Working Draft stage, you’ll need browser-specific prefixes:

transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);

You may also need transform-origin (and browser-specific versions) to make it behave the same way as zoom , and you’ll have to be careful to target zoom only at IE, because WebKit supports both transform and zoom so would double-scale.

Reduce the size of all elements in html like zooming out the page

All HTML content inside of the body tag can be «zoomed» in and out by using the CSS zoom attribute.

For example, to zoom content to 90% simply modify the body element to

zoom css/javascript

The Firefox & Chrome (Webkit) equivalents to the IE-specific zoom property are, respectively, -moz-transform and -webkit-transform .

.zoomed-element zoom: 1.5; 
-moz-transform: scale(1.5); 
-webkit-transform: scale(1.5);
>

You’d have to be a bit more careful with Javascript (test for existence first), but here’s how you’d manipulate them:

el.style.zoom = 1.5;
el.style.MozTransform = 'scale(1.5)';
el.style.WebkitTransform = 'scale(1.5)';

CSS: How to zoom in the background-image only slightly

My suggestion would be to attempt using the ‘transform’ CSS attribute. You can then give a value of ‘scale()’ with a number passed into the parentheses. The higher the number, the more the zoomed the image will appear. The good news is that you can use decimals too. This will allow you to zoom the image just a bit at a time. This would look a bit something like this.

#zoom-in background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg"); 
transform: scale(1.2);
>

Источник

CSS zoom Property

The zoom property is used to scale the content. For scaling the content, you can also use the transform property set to «scale()».

This feature is non-standard and it is not recommended to use it for production sites, because it is not supported by Firefox. Therefore, you can use transform: scale to change a site element’s size.

Syntax

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

Example of the zoom property:

html> html> head> title>Title of the document 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 property example h2> div id="grey" class="element"> div> div id="blue" class="element"> div> div id="green" class="element"> div> body> html>

Result

Values

Browser support

Источник