Bagaimana untuk Memusatkan Imej Secara Menegak dalam Div Bersaiz Responsif?

Jajarkan Imej Di Dalam Div Secara Menegak dengan Ketinggian Responsif

Masalah

Bagaimanakah kita boleh menjajarkan imej secara menegak dalam div yang mempunyai ketinggian dinamik yang melaraskan kepada lebar apabila tetingkap penyemak imbas diubah saiz untuk mengekalkan aspek segi empat sama nisbah?

Penjajaran Menegak

Untuk mencapai ini, kita boleh menggunakan teknik berikut:

1. Buat elemen pseudo blok sebaris: Sebagai anak pertama (atau terakhir) div induk, unsur pseudo dengan ketinggian 100% dijana untuk menduduki keseluruhan ketinggian ibu bapa.
2. Tetapkan jajaran menegak: Sifat jajaran menegak digunakan pada kedua-dua elemen pseudo dan elemen imej untuk menjajarkannya secara menegak di tengah-tengah bekas.
3. Alih keluar ruang putih: Saiz fon sifar ditetapkan pada induk untuk menghapuskan ruang putih antara elemen blok sebaris.

Faedah

• Bekas (div induk) boleh mempunyai dimensi dinamik, membolehkan ketinggiannya berubah bersama-sama dengan lebar.
• Dimensi elemen imej tidak perlu dinyatakan secara eksplisit.
• Teknik ini juga boleh digunakan untuk menjajarkan elemen div secara menegak dengan kandungan dinamik, tetapi saiz fon div mesti ditetapkan semula untuk memaparkan teks yang disertakan.

Bekas Responsif

Untuk mencipta bekas responsif, apabila ketinggian melaraskan dengan lebar, kita boleh menggunakan nilai peratusan pada padding atas/bawah atau margin property.

Menggabungkan Penjajaran Menegak dan Bekas Responsif

Untuk melaksanakan kedua-dua penjajaran menegak dan bekas responsif, kami boleh membalut elemen imej dalam div pembalut dengan kedudukan mutlak dan mengembangkannya untuk mengisi bekas seluruh ruang.

Contoh Kod

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Bagaimana untuk Memusatkan Imej Secara Menegak dalam Div Bersaiz Responsif?" >
  </div>
</div>

.responsive-container {
  width: 60%;
  position: relative;
}

.dummy {
  padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.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 ini menunjukkan cara menjajarkan imej secara menegak dalam bekas responsif, di mana ketinggian bekas dilaraskan berdasarkan lebar yang tersedia.

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