So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3-CSS-Tutorial-php.cn

So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3

WBOY

Freigeben： 2021-12-14 18:11:34

Original

11625 Leute haben es durchsucht

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);}“.

So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3

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>

Nach dem Login kopieren

Ausgabeergebnis:

So erreichen Sie eine gleichmäßige Reduzierung von img in CSS3

(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!