The zoom property sets the zoom level.
The zoom level of the image can be specified by applying this property to the IMG element.
#example {
zoom: 1.5;
}
| Property | Value | Explanation |
|---|---|---|
| zoom | number, %, or normal | the zoom level of the image |
The default is "normal".
zoom: 1.5;
zoom: 0.5;
zoom: 150%;
zoom: 50%;
<html> <head> <title>TAG index</title> <style type="text/css"> #example1 { zoom: normal; } #example2 { zoom: 2; } #example3 { zoom: 150%; } #example4 { zoom: 70%; } </style> </head> <body> <p><img src="image/photo.jpg" alt="Example" id="example1"> (zoom:normal)</p> <p><img src="image/photo.jpg" alt="Example" id="example2"> (zoom:2)</p> <p><img src="image/photo.jpg" alt="Example" id="example3"> (zoom:150%)</p> <p><img src="image/photo.jpg" alt="Example" id="example4"> (zoom:70%)</p> </body> </html>
(zoom:normal)
(zoom:2)
(zoom:150%)
(zoom:70%)