Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3-tutorial css-php.cn

Bagaimana untuk mencapai pengurangan perkadaran yang sama bagi img dalam css3

WBOY

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

asal

11623 orang telah melayarinya

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>

Salin selepas log masuk

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!