Css zoom in all browsers

Complete styles for cross browser CSS zoom

If we pass zoom attribute value as normal then size becomes 100%. If we pass zoom attribute value as reset then it will reset back to original size from user custom values like 120%, 70%, 150%, etc.

CSS zoom

Introduction to CSS zoom

The property in CSS is used to magnifying the size of the content whether it is plain text, images, graphical elements, etc. Magnifying may be for increasing the Size of the Element or decreasing the size of the element, it completely depends on user requirement. In earlier versions there is no zoom attribute for zoom functionality, the user has written their logic to implement zoom functionality. This predefined “zoom” attribute reduces a lot of code to write. In this topic, we are going to learn about CSS zoom.

Note: This “zoom” attribute may not be allowed by all the browsers due to compatibility issues. common supported browsers are Internet Explorer, Safari, and Chrome.

Real-Time Example: Let suppose some xyz company employees some of them are having near sight so they can’t see small things, so they can’t see browser content if it is normal font size so we have to zoom in the size. If some of them are having far sight so they can’t see big things, so they can’t see browser content if it is normal font size so we have to zoom out the size.

How does zoom work in CSS?

CSS zoom works based on attribute value provided to the zoom attribute. If we pass zoom attribute value as normal then size becomes 100%. If we pass zoom attribute value as reset then it will reset back to original size from user custom values like 120%, 70%, 150%, etc.

element
<
zoom:normal/reset/120%,70%/custom % values;
>

Accepted Values with zoom attribute:

• normal: It does not change the normal size of the element. It is the default value.
• reset: It reset to the actual 100% size.
• custom % values: If you want explicitly provide custom values like 70%, 80%, 120%, 150%, etc then use this percentage with zoom attribute. If we give percentage >100 then content size increases, if we give a percentage

Examples of CSS zoom

Here are the following examples mention below

Example #1 – Zoom-in

Introduction to zoom-in functionality

Example #2 – Zoom out

Introduction to zoom-out functionality

Example #3 – Zoom-in and zoom-out of images

Introduction to zoom-in and zoom-out functionality with images

Conclusion

Zoom in CSS is used to magnifying the content of the page. CSS zoom attributes allow normal, reset, and percentages values. More than 100% result in increasing the element size, less than 100% result in decreasing the element size, and if equal to 100% is the normal default size of the element.

Final thoughts

This is a guide to CSS zoom. Here we discuss how does zoom work in CSS with attribute and programming examples for better understanding. You may also have a look at the following articles to learn more –

Zoom out page CSS

I have a website that works perfectly when I zoom out my browser to 50%. But it is very bad on normal size (100%). I already use transform and zoom on the CSS but not being what I wanted CSS. I cannot decrease font or image because of some reason. All I want is to just make this page look like I Zoom out the browser 50%.

  .navbar-brand < position: absolute; width: 100%; left: 0; text-align: center; margin:0 auto; >.navbar-toggle < z-index:3; >.dropbtn < background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; >.dropdown < position: relative; display: block; >.dropdown-content < display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; >.dropdown-content a < color: black; padding: 12px 16px; text-decoration: none; display: block; >.dropdown-content a:hover .dropdown:hover .dropdown-content < display: block; >.dropdown:hover .dropbtn < background-color: #3e8e41; >@media (min-width: 1025px) < html < /* -webkit-transform: scale(2); -moz-transform: scale(2); transform: scale(2);*/ /* transform: scaleX(1) scaleY(.5);*/ >> @media (max-width: 600px) < #judul< visibility: hidden; display: none >#menu < display: none; >#menu-content < display: block; position: relative; >#logo 

You can use a non-css solution for this:

But you can actually use CSS to zoom (but i dont recommend this for the entire page):

/* you can apply this on body aswell */ .zoomedElement < background-color: #CCF; zoom: 300%; >.scaledElement < background-color: #FAC; transform: scale(1.2); /* scales in all directions, probably not what you want but worth mentioning */ >

Heading Zoomed Some text.
 
Heading Scaled Some text.
 

You can effectively render at 50% zoom by setting the body’s width / height to 200% , but at 50% scale with transform . You’ll also need to set the transform-origin to top left to avoid the scale transformation from shifting the top left corner of the body away from the top left corner of the window.

This can be used for arbitrary zoom levels, just by using that proportion for scale , and the inverse of that proportion for width / height .

Zoom — CSS: Cascading Style Sheets, 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 …

Complete styles for cross browser CSS zoom

I am finding it hard to get fully cross browser CSS zoom properties ..what I’ve is only these

zoom: 2; -moz-transform: scale(2); 

These will be sufficient for cross browser.

Note: As @martin pointed out that this may not work as intended , doesn’t mean this fails, Chrome just makes it 2x larger than other browsers, because it RESPECTS zoom property as well. So it makes it 2x larger.

zoom: 2; /* IE */ -moz-transform: scale(2); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(2); /* Opera */ -o-transform-origin: 0 0; -webkit-transform: scale(2); /* Safari And Chrome */ -webkit-transform-origin: 0 0; transform: scale(2); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ 

Here is a css only solution

If scripting is feasible then you can avoid both the collision of multiple supported zoom properties and the browser sniffing by using future-proof feature detection.
Note: I’m using jQuery here for convenience, but it could be written without it.

CSS:

HTML:

var strPropZoom = "zoom"; var blnPropZoomUseScale = false; $(function() < var jqBody = $("body"); // Determine the supported 'zoom' method switch (true) < case Boolean(jqBody.css("zoom")) : break; case Boolean(jqBody.css("-moz-transform")) : strPropNameZoom = "-moz-transform"; blnPropZoomUseScale = true; break; case Boolean(jqBody.css("-o-transform")) : strPropNameZoom = "-o-transform"; blnPropZoomUseScale = true; break; case Boolean(jqBody.css("-webkit-transform")) : strPropNameZoom = "-webkit-transform"; blnPropZoomUseScale = true; break; >>) 

Then when zooming is required simply invoke:

var intZoom = 2.5; // NB: This could be calculated depending on window dimensions $(".mySelectorClass") .css( strPropZoom ,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom) ) .addClass("zoom"); 

In response to the above comment by @martin (he is correct), I created a complicated workaround using javascript (includes some jQuery) and some of @Mr. Alien’s css. Unquestionably, there are other ways to accomplish this — perhaps simpler, but, the following js and css combo works for me:

.zoom < -moz-transform: scale(2); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(2); /* Opera */ -o-transform-origin: 0 0; zoom:2 /*IE*/; >//Notice the absence of any Webkit Transforms 

(function($) < var version=false, isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') >0, isOpera=!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0, isChrome=!!window.chrome && !isOpera; if(isChrome)< version=(window.navigator.appVersion.match(/Chrome\/(\d+)\./)!==null) ? parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) : 0; version=(version >= 10) ? true : false; // Don't know what version they switched it. Figured that this was a good guess > // I added the extra ternary check in there because when testing in Chrome, // if I switched the user agent in the overrides section, it kept failing with // null value for version. if(isSafari || version) < $('.zoom').css('-webkit-transform','scale(2)'); $('.zoom').css('-webkit-transform-origin','0 0'); // If Scaling based upon different resolutions, a check could be included here // for window size, and the css could be adjusted accordingly. >>(jQuery)) 

The browser detection code came from here and the Chrome version detection snippet came from this post.

Zoom a pic css Code Example, -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5);

Источник

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 устанавливает коэффициент масштабирования элемента и используется как для увеличения, так и для уменьшения размеров объекта. Значение по умолчанию zoom — normal , что соответствует, отображению элемента без масштабирования, с исходными размерами. Данное свойство может применяться ко всем элементам и не наследуется. Свойство zoom не является частью стандарта CSS и поддерживается только браузерами Internet Explorer 5.5+, Google Chrome 1.0+ и Apple Safari 4.0+. В Internet Explorer 8+ рекомендуется использовать свойство -ms-zoom . Для достижения кроссбраузерной совместимости целесообразнее использовать свойство transform из модуля CSS3 2D Transforms.

Если для элемента вложенного в другой элемент так же установлен коэффициент масштабирования, то для дочерного элемента размеры будут расчитываться не относительно его исходного размера, а относительно его исходного размера с учетом масштаьбирования родительского элемента. Хотя свойство не наследуется, но изменение масштаба коснется всех потомков данного элемента.

Допустимые значения

• — Вещественное число, указывающее коэффициент масштабирования, где 1.0 соответствует исходным размерам, или значению normal. Значения меньше 1.0 соответствуют уменьшению, а больше 1.0 — увеличению масштаба. Отрицательные значения игнорируются.
• — Процентное значение, указывающее коэффициент масштабирования, где 100% соответствуют исходным размерам, или значению normal. Значения меньше 100% соответствуют уменьшению, а больше 100% — увеличению масштаба. Отрицательные значения игнорируются.
• normal — масштабирование отсутствует, элемент отображается с исходными размерами

Примеры использования

.zoom-multiply-outer < zoom: 125%; zoom: 1.25; >.zoom-multiply-inner

Свойство zoom относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение normal. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

Источник