Bagaimana untuk Memusatkan Imej Secara Menegak dalam Div dengan Ketinggian Responsif?

Jajarkan Imej Di Dalam Div Secara Menegak dengan Ketinggian Responsif

Dalam panduan ini, kami akan membincangkan cara menjajarkan imej secara menegak dalam div yang mempunyai ketinggian responsif .

Pendekatan

Untuk mencapai penjajaran menegak, kami akan menggunakan blok sebaris elemen dan memanfaatkan sifat CSS seperti kedudukan, atas, ketinggian dan penjajaran teks. Begini caranya:

1. Cipta Elemen Pseudo

Tambah elemen pseudo blok sebaris sebagai anak pertama div bekas. Tetapkan ketinggiannya kepada 100% untuk mengisi ketinggian bekas.

2. Penjajaran Menegak

Tetapkan sifat penjajaran menegak ke tengah untuk kedua-dua elemen pseudo dan imej untuk memastikan ia dijajarkan secara menegak.

3. Buang Jarak

Untuk menghapuskan sebarang ruang kosong antara elemen pseudo dan imej, tetapkan saiz fon div induk kepada 0, meruntuhkan sebarang kandungan teks.

Pelaksanaan

Pertimbangkan HTML dan CSS berikut:

<div class="container">
  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Image">
  </div>
</div>

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

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

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

The Keputusan

Teknik ini membolehkan imej dijajarkan secara menegak di dalam bekas sambil mengekalkan ketinggian responsif bekas.

Properties Maks untuk Saiz Imej

Untuk memastikan bahawa imej tidak melebihi saiz bekas, pertimbangkan untuk menetapkan sifat ketinggian maksimum dan lebar maksimum pada imej:

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

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