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
- WBOYasal
- 2021-12-14 18:11:3411593semak 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);}".
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:
(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!