{"id":14144,"date":"2011-09-06T19:44:20","date_gmt":"2011-09-07T02:44:20","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14144"},"modified":"2013-03-13T14:12:11","modified_gmt":"2013-03-13T21:12:11","slug":"zoom","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/z\/zoom\/","title":{"rendered":"zoom"},"content":{"rendered":"<p>The <code>zoom<\/code> property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn&#8217;t recommended for production sites.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.zoom {\r\n  zoom: 150%;\r\n}<\/code><\/pre>\n<p>The &#8220;supported: values are:<\/p>\n<ul>\n<li><code>percentage<\/code> &#8211; Scale by this percentage<\/li>\n<li><code>number<\/code> &#8211; Convert to percentage and scale &#8211; 1 == 100%; 1.5 == 150%;<\/li>\n<li><code>normal<\/code> &#8211; zoom: 1;<\/li>\n<\/ul>\n<p>If your browser supports it, you&#8217;ll see these images as different sizes:<\/p>\n<pre class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"pCzFl\" data-user=\"chriscoyier\" data-safe=\"true\"><code><\/code><a href=https://css-tricks.com/"http:////codepen.io//chriscoyier//pen//pCzFl/" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p>Zoom is an old IE thing. It isn&#8217;t something you should use on live sites. If you want to scale content, use <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transform///">CSS Transforms<\/a>. You can also use <a href=https://css-tricks.com/"http:////www.useragentman.com//IETransformsTranslator///" rel=\"noopener\">filters<\/a> if you need <abbr title=\"Internet Explorer versions 6-8\">oldIE<\/abbr> support.<\/p>\n<p>Back in the days of IE6, zoom was used primarily as a hack. Many of the rendering bugs in both IE6 and IE7 could be fixed using zoom. As an example, <code>display: inline-block<\/code> didn&#8217;t work very well in IE6\/7. Setting <code>zoom: 1<\/code> fixed the problem. The bug had to do with how IE rendered its layout. Setting <code>zoom: 1<\/code> turned on an internal property called <a href=https://css-tricks.com/"http:////www.satzansatz.de//cssd//onhavinglayout.html/" rel=\"noopener\">hasLayout<\/a>, which fixed the problem.<\/p>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transform///"><code>transform<\/code><\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////www.satzansatz.de//cssd//onhavinglayout.html/" rel=\"noopener\">More on the zoom hack<\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////developer.apple.com//library//safari//#documentation\/AppleApplications\/Reference\/SafariCSSRef\/Articles\/StandardCSSProperties.html#\/\/apple_ref\/css\/property\/zoom\" rel=\"noopener\">Safari zoom documentation<\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////www.useragentman.com//IETransformsTranslator///" rel=\"noopener\">CSS3 transforms to IE filter converter<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">4.0+<\/td>\n<td class=\"nope\">None<\/td>\n<td class=\"nope\">None<\/td>\n<td class=\"yep\">5.5+<\/td>\n<td class=\"yep-nope\">TBD<\/td>\n<td class=\"yep-nope\">TBD<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Safari also supports <code>zoom<\/code> since version 4. However, it added a new value: <code>reset<\/code>. That tells the browser not to zoom your element on zoom. So your cmd\/ctrl+? It doesn&#8217;t work on elements with <code>zoom: reset<\/code> applied. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13961,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14144"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14144"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14144\/revisions"}],"predecessor-version":[{"id":20546,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14144\/revisions\/20546"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13961"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14144"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}