Bagaimana untuk menetapkan atribut gaya img menggunakan CSS

Dalam reka bentuk web, elemen img ialah elemen yang sangat biasa, yang digunakan untuk memasukkan gambar. Jika anda ingin mengawal kedudukan, saiz, jarak, penjajaran dan atribut imej yang lain, anda boleh menggunakan CSS untuk menetapkan elemen img. Di bawah ini kami akan memperkenalkan cara menetapkan sifat CSS bagi elemen img.

1. Tetapkan saiz imej:

1. Tetapkan melalui atribut lebar dan tinggi

Anda boleh menetapkan lebar dan tinggi imej melalui atribut lebar dan tinggi CSS Height, contohnya:

img{
    width: 500px;
    height: 300px;
}

2. Ditetapkan oleh atribut lebar maks dan ketinggian maks

Jika anda mahu imej mengekalkan nisbah aspek, mengikut bekas Untuk mengubah saiz lebar secara adaptif, anda boleh menggunakan atribut lebar maks dan ketinggian maks, contohnya:

img{
    max-width: 100%;
    max-height: 100%;
}

Dengan cara ini, tanpa mengira saiz bekas, imej akan mengekalkan nisbah aspek dan mengubah saiz secara adaptif tanpa muncul.

2. Tetapkan imej untuk dijajarkan di tengah:

1. Jajarkan di tengah secara mendatar

Untuk menjajarkan imej di tengah secara mendatar, anda boleh menetapkan atribut paparan elemen img untuk menyekat , dan menggunakan atribut margin untuk menetapkan margin kiri dan kanan kepada auto, contohnya:

img{
    display: block;
    margin: 0 auto;
}

Dengan cara ini, imej akan dijajarkan secara mendatar di tengah.

2. Penjajaran berpusat menegak

Untuk menjajarkan imej secara menegak di tengah, anda boleh menggunakan reka letak kotak flex atau atribut kedudukan untuk menetapkannya. Mengambil reka letak flexbox sebagai contoh, anda boleh menetapkan paparan: atribut flex pada bekas dan gunakan atribut align-item untuk menetapkan penjajaran tengah menegak, contohnya:

.container{
    display: flex;
    align-items: center;
}
img{
    margin: 0 auto;
}

Dengan cara ini, imej akan dijajarkan secara menegak di tengah-tengah bekas.

3. Tetapkan jidar imej:

Anda boleh menetapkan jidar imej melalui ciri jidar dan padding CSS. Contohnya:

img{
    margin: 10px;
    padding: 5px;
}

Ini akan memberikan imej jidar 10 piksel di bahagian luar dan jidar 5 piksel di bahagian dalam.

4. Tetapkan bentuk imej:

Jika anda ingin menukar bentuk imej, anda boleh menggunakan atribut jejari sempadan untuk menetapkan jejari sudut imej, contohnya:

img{
    border-radius: 50%;
}

Selepas menetapkan atribut ini, imej akan menjadi bulat.

5 Tetapkan gaya bekas induk imej:

Jika anda ingin menetapkan gaya bekas induk imej, anda boleh menggunakan pemilih CSS untuk mendapatkan induk bekas, contohnya:

<div class="container">
    <img src="example.jpg">
</div>

.container{
    background-color: #f2f2f2;
    padding: 10px;
}

Dengan cara ini, bekas induk imej akan mempunyai warna latar belakang dan pelapik.

Ringkasan:

Setelah memahami cara menggunakan atribut CSS di atas, kami boleh menggayakan elemen img secara fleksibel. Menguasai kemahiran ini boleh membantu kita mengawal kesan paparan imej dalam reka bentuk web dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan atribut gaya img menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!