Heim >Web-Frontend >CSS-Tutorial >So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3
So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3
- WBOYOriginal
- 2021-12-14 18:11:3411653Durchsuche
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!