Home > Article > Web Front-end > How to achieve equal proportion reduction of img in css3
How to achieve equal proportion reduction of img in css3
- WBOYOriginal
- 2021-12-14 18:11:3411603browse
In css, the transform attribute can be used in conjunction with the scale() function to realize the equal reduction of img elements. The transform attribute allows setting the scaling operation of the element. The scale() function is used to define the scaling transformation of the element. The syntax is "img {transform:scale(scale);}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve the proportional reduction of img in css3
In css, if you want to achieve the proportional reduction of img elements, you need to use the transform attribute Implemented with the scale() function.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
The scale() function is used to define the scaling transformation of elements.
scale() function The value in the function is the scaling ratio of the element.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:scale(0.5);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="How to achieve equal proportion reduction of img in css3" >
<p>上面是等比例缩小的，下面是原比例</p>
<img src="1118.02.png" alt="How to achieve equal proportion reduction of img in css3" >
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve equal proportion reduction of img in css3. For more information, please follow other related articles on the PHP Chinese website!