Heim > Artikel > Web-Frontend > So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3
In CSS kann das Transformationsattribut in Verbindung mit der Funktion „scale()“ verwendet werden, um die gleiche Reduzierung von img-Elementen zu erreichen. Das Transformationsattribut ermöglicht das Festlegen der Skalierungsoperation des Elements. Die Funktion „scale()“ wird zum Definieren verwendet die Skalierungstransformation des Elements. Die Syntax lautet „img{transform:scale (zoom ratio);}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erreichen Sie die proportionale Reduzierung von img in CSS3
Wenn Sie in CSS die proportionale Reduzierung von img-Elementen erreichen möchten, müssen Sie das Transformationsattribut und die Funktion „scale()“ verwenden, um dies zu erreichen. Das Attribut
transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Die Funktion
scale() wird verwendet, um die Skalierungstransformation von Elementen zu definieren.
scale()-Funktion Der Wert in der Funktion ist das Skalierungsverhältnis des Elements.
Das Beispiel sieht wie folgt aus:
<!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="So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3" > <p>上面是等比例缩小的,下面是原比例</p> <img src="1118.02.png" alt="So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3" > </body> </html>
Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine gleichmäßige Reduzierung von img in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!