Bagaimana untuk membuat imej lebih kecil dengan css-tutorial css-php.cn

Bagaimana untuk membuat imej lebih kecil dengan css

WBOY

Lepaskan： 2021-11-25 16:17:01

asal

21471 orang telah melayarinya

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;}".

Bagaimana untuk membuat imej lebih kecil dengan css

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>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk membuat imej lebih kecil dengan css

<. 🎜> 2. Dalam Anda boleh menggunakan atribut saiz latar belakang dalam css untuk mengurangkan imej Mari kita lihat contoh di bawah:

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

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk membuat imej lebih kecil dengan css

(Ketahui perkongsian Video:

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!