How to control scaling with the CSS zoom property?

When creating a website, there are occasions when you want to enlarge or reduce elements for display.

In order to enlarge and reduce the element, the method using the CSS zoom property was used.

The zoom property is no longer standardized and not commonly used.

However, when renovating an old website, there are situations where you can’t renovate without understanding the zoom property.

In this article, we will introduce how to write and use the zoom property, and standard properties that can replace the zoom property.

The standard description method for enlarging and reducing HTML elements is introduced later in the article, so please read to the end.

Control scaling with the CSS zoom property

The CSS zoom property is, as the name suggests, a property that controls the magnification of an HTML element .

When you hear the word “zoom,” you may think that it only expands, but you can also reduce it by lowering the magnification rate.

In this part, we will introduce how to describe the CSS zoom property, how to specify its value, and how to specify the zoom ratio efficiently.

Understand the zoom property and be able to zoom in and out on HTML elements gracefully.

How to write the zoom property

First, I will introduce how to write the zoom property.

The description method of the zoom property is as follows.

It’s hard to understand just by describing it, so I’ll explain it with actual code.

First of all, I will present code that does not use the zoom property.

HTML
<div class="kakudai">
    <img src="computer.jpg" alt="">
</div>

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 200px;
}

Let’s use the zoom property to enlarge the image specified in the img tag above to 1.5 times its size.

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 200px;
  zoom: 150%;
}

Since zoom: 150% was specified in the CSS of the img tag, the width was expanded to 300px, which is 1.5 times the width of 200px.

You can see that the size is the same as the background color.

Now, let’s take a look at a code example that uses the zoom property to reduce the image above.

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 200px;
  zoom: 50%;
}

Since zoom: 50% was specified in the CSS of the img tag, the width was reduced to 100px, which is 0.5 times 200px.

Since the background is 300px, you can see that the image has been reduced to one-third.

The CSS zoom property can be easily implemented by simply specifying the style for the HTML element you want to zoom in and out.

Since there are values ​​other than % that can be specified, we will introduce them.

There are four main values ​​for the zoom property

There are mainly four values ​​for the zoom property of CSS as shown in the table below.

normal is the initial value and is used when you want to restore the zoom property to its initial value.

reset can be specified so that even if the user tries to enlarge or reduce the size, it will not be enlarged or reduced.

It is used in situations where it would be difficult to scale up or down .

% and numbers are values ​​that express the same meaning, and describe the magnification rate as a magnification of the standard size.

In the case of %, a value greater than 100% can be used for enlargement, and a value less than 100% can be used for reduction.

For numeric values, a value greater than 1.0 scales up and a value less than 1.0 scales down.

It is easier to understand if the magnification of the zoom property is specified numerically

When manipulating the zoom factor with the CSS zoom property, it doesn’t matter if you use % or numbers, but numbers are more intuitive and easier to understand .

The magnification is the same whether it is a % or a numerical value, but if the numerical description is unified, it can be expressed by multiplying it with the original size.

Furthermore, as I will introduce later in the article, numbers can be written more smoothly when rewriting the zoom property to the transform property.

The use of the CSS zoom property is when you want to expand

The scene using the zoom property of CSS is used especially when you want to enlarge .

For example, in a scene where only a small image can be displayed, it can be used to express movement that expands only when the user hovers.

Let me explain with a simple code example.

HTML
<div class="kakudai">
    <img src="computer.jpg" alt="コンピューターの画像">
</div>

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 100px;
}

The above image is small and hard to see, so it will be enlarged when hovered.

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 100px;
}
img:hover{
  zoom: 3;
}

As in the above code, you can zoom in and display the image when hovering by writing the zoom property for :hover.

Another use for the CSS zoom property is checkboxes and radio buttons written in the input tag.

Here’s a simple code example.

HTML
<input type="checkbox" name="" id="check">
<input type="radio" name="" id="radio">

If nothing is specified with CSS, checkboxes and radio buttons are small and may be difficult for users to select .

Here, use the zoom property to enlarge and create a state that is easy to press.

CSS
#check{
  zoom: 2;
}
#radio{
  zoom: 3;
}

In the CSS code above, the checkboxes have expanded twice their normal size and the radio buttons have expanded 3 times their normal size.

Sometimes usability and design are at odds and you choose how to scale.

What to do when the expanded element protrudes from the parent element

When enlarging an HTML element with the zoom property, it may protrude from the parent element because it is specified by the enlargement ratio.

If it protrudes from the parent element, there is a way to hide the protruding part .

I will explain using a simple code example.

HTML
<div class="kakudai">
    <img src="computer.jpg" alt="コンピューターの画像">
</div>

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: red;
}
img{
  width: 100px;
  zoom: 3;
  opacity: 0.7;
}

In the above case, the width is within the parent element, but the height is displayed protruding.

To hide the part that protrudes from the parent element, describe the overflow property on the parent element.

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: red;
  overflow: hidden;
}
img{
  width: 100px;
  zoom: 3;
  opacity: 0.7;
}

By writing overflow:hidden in the parent element, you can hide the overflowing part and put it in the parent element.

When enlarging an element such as an image, it is often the case that it overflows, so let’s also remember the overflow property.

Supported browsers for zoom property

The CSS zoom property was only supported by IE (Internet Explorer) at the beginning of development.

However, it now supports browsers other than Firefox .

When creating a website, it is common to design it so that the display does not collapse on any browser.

Therefore, if there is a non-compliant browser, the property may not be usable.

The zoom property is one of them.

Why the CSS zoom property is deprecated

The CSS zoom property is now deprecated for building websites.

As I explained above, it’s not always easy to use.

However, it can be said that the following three reasons are largely deprecated.

I will briefly explain each reason.

not standardized

The CSS zoom property is not standardized.

Web technologies such as HTML and CSS are developed by an organization called W3C (World Wide Web Consortium) so that they can be standardized globally.

Using properties that have not been standardized by the W3C may result in different display depending on the browser or user .

The zoom property is one of them, and using the zoom property may change the display between browsers or users.

Furthermore, the lack of standardization means that there may be nothing to do with the zoom property in web technologies that will be developed.

For these reasons, the use of non-standardized properties is deprecated.

Not compatible with all browsers

As mentioned above, the zoom property is not supported by the browser Firefox.

If not, Firefox users will end up with websites that are not zoomed in.

So I need to know how to use a property that works for Firefox as well.

We’ll go into more detail later in the article about properties that also support Firefox.

reset doesn’t work in most browsers

Among the values ​​of the zoom property is reset.

reset is a value to control not to enlarge and reduce when trying to control enlargement and reduction with the keyboard .

Zoom property reset cannot be used in browsers other than Safari.

Lack of support in most browsers is one of the reasons why it is deprecated.

What to do when the zoom property does not work in Firefox

The Firefox browser cannot use the zoom property no matter how devised it is.

Therefore, from here on, we will introduce CSS properties that can be used in Firefox to scale HTML elements.

The property that scales and shrinks that can also be used in Firefox is the transform property .

You can implement the same behavior as the zoom property by using the transform property’s scale.

First, let’s take a look at the transform property.

transform property is a property to change the shape

A transform property is a CSS property that changes the shape or moves of an HTML element .

For example, you can move the image horizontally as follows.

HTML
<div class="kakudai">
    <img src="computer.jpg" alt="コンピューターの画像">
</div>

CSS
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
  overflow: hidden;
}
img{
  transform: translateX(20px);
}

In the code above, I used transform:translateX to move the image horizontally by 20px.

There are many other effects you can implement, as shown in the table below.

rotate

scale

skew

This time, we will explain the zoom property, so we will omit the values ​​other than scale.

But keep in mind that the transform property is a flexible property that can be used for various representations.

Use transform:scale when you want to zoom in and out in Firefox

Among the transform properties, the value that can implement the same expression as the zoom property is scale.

First of all, I will introduce a simple description example of transform:scale.

HTML
<div class="kakudai">
    <img src="computer.jpg" alt="コンピューターの画像">
</div>

CSS(transformを記述する前)
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 100px;
}

Enlarge the above image by 1.5 times using transform:scale.

CSS(transform:scaleで1.5倍にした場合)
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 100px;
  transform: scale(1.5);

Simply applying transform:scale will cause it to extend beyond its parent element.

This is because the transform property changes from the center of the HTML element.

However, with the above behavior, it will behave differently from the zoom property.

To get the same movement as the zoom property, you have to change the origin of the transform property.

To change the origin, use the transform-origin property .

transform-origin to change the origin of the transform property

Here is a code example when using the transform-origin property.

CSS(transform-originを使用した場合)
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 100px;
  transform-origin: 0 0;
  transform: scale(2);
}

By specifying transform-origin:0 0, you can set the origin to the upper left of the original position .

The value of the transform-origin property specifies the x- and y-axes starting at the top left of the element.

There are many other ways to specify the transform-origin property.

An equivalent value for transform-origin:0 0; is transform-origin:top left;.

You can also specify top, bottom, left, or right instead of numerical values.

If you want to make detailed settings, use px or %, but if you want to make rough decisions, use keywords such as top and left.

By combining the transform and transform-origin properties, you can implement the same representation as the zoom property.

Hover time and checkboxes can also be expanded in the same way

The transform property is also available on hover and when expanding checkboxes and radio buttons.

A simple code example is also introduced for each description method.

CSS(ホバーした時に拡大させる場合)
.kakudai{
  width: 300px;
  height: 200px;
  background-color: bisque;
}
img{
  width: 100px;
}
img:hover{
  transform-origin: 0 0;
  transform: scale(2);
}

When hovering over the image, it will behave in the same way as the zoom property .

Don’t forget to write the transform-origin property here as well, or it will protrude from the parent element.

HTML(チェックボックスやラジオボタンの場合)
<input type="checkbox" name="" id="check">
<input type="radio" name="" id="radio">

CSS(チェックボックスやラジオボタンを拡大した場合)
#check{
  transform-origin: 0 0;
  transform: scale(2);
}
#radio{
  transform-origin: 0 0;
  transform: scale(2);
}

Checkboxes and radio buttons can also be expanded without problems with the transform property.

Not only Firefox, but any other browser can implement the transform property.

Previously, you had to write a vendor prefix such as -webkit-, but this is not necessary for the transform property.

Enlarging and reducing is the transform property rather than the zoom property

We’ve covered the CSS zoom and transform properties for scaling HTML elements.

Now you must use the transform property when scaling HTML elements .

There are four reasons:

The above three are the same as explained in the first half of the article.

As for the fourth, by devising the transform-origin property, the range of expression for expansion and contraction can be expanded.

Since it can be enlarged and reduced in a manner shifted from the basic upper left position, it is possible to control while moving freely.

For these reasons, we recommend using the transform property rather than the zoom property when you want to implement scaling for HTML elements .

summary

I mainly explained how to describe the zoom property of CSS and how to zoom in and out in Firefox.

The CSS zoom property has not been standardized in CSS and is deprecated .

We recommend using the transform property to implement scaling of HTML elements in your current website production.

The reason is that there are many browsers that support it, the amount of description is large, and there are values ​​that are not supported.

However, the zoom property may have been written during the renovation work of the old website.

In order to deal with such situations without rushing, it is necessary to understand the existence of the zoom property and how to describe it.