Bagaimana untuk Memusatkan Imej Secara Menegak Dalam Div Bersaiz Responsif?

Cara Menjajarkan Imej secara Menegak dalam Div dengan Ketinggian Fleksibel

Masalah:

Anda mempunyai bekas div dengan ketinggian responsif yang menyesuaikan secara berkadar dengan perubahan lebar. Dalam bekas ini, anda mempunyai imej dengan ketinggian yang berbeza-beza. Cabaran anda ialah untuk menjajarkan imej secara menegak di tengah-tengah bekas tanpa mengira ketinggiannya.

Penyelesaian:

Untuk mencapai penjajaran menegak dalam persekitaran responsif ini, kami memperkenalkan pendekatan inovatif yang melibatkan peletakan elemen sebaris di samping imej.

Menegak Penjajaran:

1. Penciptaan unsur Pseudo: Dalam .img-container (yang menjadi tuan rumah imej), kami mencipta elemen peringkat blok (pseudo-) secara langsung sebelum imej.
2. Pelarasan Ketinggian: Ini unsur pseudo mengembang secara menegak untuk menggunakan semua ketinggian yang ada, menguatkuasakan ketinggian 100% agar sepadan dengan ketinggian bekas.
3. Penjajaran Menegak Elemen: Kedua-dua elemen pseudo dan imej memperoleh menegak- align: tengah; penggayaan, memastikan penjajaran yang betul dalam garisan.
4. Penyingkiran Saiz Fon: Untuk mengalih keluar sebarang ruang putih antara elemen ini, kami menetapkan saiz fon: 0; pada bekas induk.

Faedah Pendekatan Ini:

• Dimensi bekas dinamik
• Penjajaran imej automatik tanpa spesifikasi ketinggian yang jelas
• Kepelbagaian dalam menjajarkan elemen lain, seperti div dengan kandungan berubah-ubah (laraskan saiz fon kembali kepada teks paparan)

Bekas Responsif:

Untuk menjadikan ketinggian bekas fleksibel dengan lebarnya, kami menggunakan nilai peratusan pada sifat padding-top:

• 100% padding-top: Mencipta segi empat sama dengan ketinggian dan lebar yang sama
• Nilai peratusan yang lebih tinggi (cth., 150% atau 200%): Tinggi ialah peratusan yang lebih besar daripada lebar

Teknik pelapik ini juga boleh digunakan untuk div kanak-kanak atau elemen pseudo CSS.

Kandungan Peletakan:

Atas pelapik mencipta ruang yang berlebihan di atas dan/atau di bawah kandungan dalam bekas. Untuk menyelesaikan masalah ini, kami melampirkan kandungan dalam elemen pembungkus:

• Kedudukan mutlak: Mengalih keluar pembungkus daripada aliran dokumen biasa, membenarkan ia memenuhi seluruh ruang bekas.
• Atas , sifat kanan, bawah dan kiri: Kembangkan pembalut untuk menutupi bekas dimensi.

Pelaksanaan Akhir:

Menggabungkan teknik ini, kami mencapai matlamat kami:

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

.responsive-container {
  width: 60%;
  height: 300px;  /* Example height for demo purposes */
  position: relative;
}

.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;
  max-height: 100%;  /* Optional: Ensures image stays within container */
  max-width: 100%;   /* Optional: Ensures image stays within container */
}

Demonstrasi:

[Jajarkan Imej Secara Menegak dalam Responsif Div](https://codepen.io/cristianorocha/pen/dywbQMV)

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!