Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat imej lebih kecil dengan css
Bagaimana untuk membuat imej lebih kecil dengan css
- WBOYasal
- 2021-11-25 16:17:0121417semak imbas
Kaedah: 1. Gunakan atribut lebar dan ketinggian untuk mengecilkan imej, sintaksnya ialah "objek gambar {width: width; height: height;}" 2. Gunakan atribut "background-size" untuk kecilkan imej, sintaksnya ialah " Objek gambar {background-size: width height;}".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Cara membuat imej lebih kecil dengan css
1 Dalam css, kita boleh menetapkan ketinggian dan lebar imej melalui lebar dan atribut ketinggian. Saiz imej untuk mencapai tujuan mengurangkan imej.
Mari kita lihat melalui contoh contohnya seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div><img src="1118.02.png" alt="Bagaimana untuk membuat imej lebih kecil dengan css" ><br>
</div>
<br />
<p><strong>通过CSS使图片缩小</strong></p>
<div>
<img src="1118.02.png" class="img" alt="Bagaimana untuk membuat imej lebih kecil dengan css" ><br>
</div>
</body>
</html>Hasil keluaran:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 320px;
}
.box1{
background:url(1118.02.png) no-repeat;
}
.box2{
background:url(1118.02.png) no-repeat;
background-size: 200px 160px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div class="box1"></div>
<br />
<p><strong>通过CSS缩小背景图片</strong></p>
<div class="box2"></div>
</body>
</html>Hasil keluaran:
tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk membuat imej lebih kecil dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!