Bagaimana untuk Menjajarkan Imej Secara Menegak dalam Bekas Bersaiz Dinamik?

Menjajarkan Imej Secara Menegak dalam Bekas Ketinggian Dinamik

Masalah: Bagaimanakah seseorang boleh menjajarkan imej secara menegak dalam bekas responsif yang ketinggiannya ditentukan oleh penyemak imbas berdasarkan mereka lebar?

Penyelesaian:

1. Menggunakan Elemen Sebaris untuk Penjajaran Menegak:

Untuk menjajarkan elemen sebaris secara menegak dalam elemen induk, cipta elemen peringkat blok (pseudo-) sebagai anak pertama dan tetapkan ketinggiannya kepada 100% daripada induknya . Selain itu, gunakan menjajarkan menegak: tengah pada elemen pseudo dan elemen imej sasaran.

2. Faedah:

• Dimensi bekas dinamik disokong.
• Dimensi imej tidak perlu dinyatakan secara eksplisit.
• Boleh digunakan untuk menjajarkan sebaris atau div elemen secara menegak, dengan pilihan menetapkan semula saiz fon untuk elemen div untuk memaparkan kandungannya.

3. Bekas Responsif dengan Penjajaran Imej Menegak:

Untuk mencipta bekas responsif dengan ketinggian yang menyesuaikan dengan lebarnya, gunakan nilai peratusan untuk sifat padding-top.

4. Menambah Kandungan pada Bekas Responsif:

Gunakan elemen pembungkus dalam bekas responsif untuk menempatkan kandungan. Letakkan pembalut secara mutlak dan kembangkannya untuk memenuhi ruang bekas.

Kod HTML:

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="image.jpg" alt="">
    </div>
</div>

Kod CSS untuk Penjajaran Menegak:

.img-container {
    text-align: center;
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

Kod CSS untuk Responsif Bekas:

.responsive-container {
    position: relative;
}

.responsive-container .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Imej Secara Menegak dalam Bekas Bersaiz Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!