Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3

Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3

WBOY
WBOYasal
2021-12-14 18:11:3411620semak imbas

Dalam css, atribut transform boleh digunakan bersama-sama dengan fungsi skala() untuk merealisasikan pengurangan perkadaran yang sama bagi elemen img Atribut transformasi membolehkan menetapkan operasi skala elemen digunakan untuk mentakrifkan transformasi penskalaan elemen. Sintaks ialah "img {transform:scale(scale);}".

Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk mencapai pengurangan berkadar img dalam css3

Dalam css, jika anda ingin mencapai pengurangan berkadar unsur img, anda perlu menggunakan atribut transform yang Dilaksanakan dengan fungsi skala().

Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

fungsi skala() digunakan untuk mentakrifkan transformasi penskalaan elemen.

fungsi skala() Nilai dalam fungsi ialah nisbah penskalaan elemen.

Contoh adalah seperti berikut:

<!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="Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3" >
    <p>上面是等比例缩小的,下面是原比例</p>
    <img  src="1118.02.png"  alt="Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3" >
</body>
</html>

Hasil keluaran:

Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn