Bagaimanakah Saya Boleh Menjajarkan Imej Secara Menegak Dalam Bekas Responsif?

Menjajarkan Imej secara menegak dalam Bekas Responsif

Cabarannya

Anda mempunyai struktur HTML dengan bekas yang mengekalkan nisbah aspek segi empat sama sebagai tetingkap penyemak imbas diubah saiznya. Di dalam bekas ini, anda ingin menambah imej, tetapi perlu memastikan ia kekal dijajar menegak. Cabaran timbul kerana ketinggian imej berubah-ubah dan ketinggian bekas tidak boleh dibetulkan.

Penyelesaian

Menggunakan Elemen Sebaris CSS

1. Buat elemen pseudo blok sebaris sebagai anak pertama (atau terakhir) elemen bekas dan tetapkan ketinggiannya kepada 100% untuk menduduki keseluruhan ketinggian bekas.
2. Tetapkan penjajaran menegak: tengah kepada kedua-dua elemen pseudo dan imej untuk memusatkan elemen secara menegak.
3. Alih keluar sebarang ruang putih antara unsur dengan menetapkan fon -saiz: 0; pada elemen bekas untuk mengalih keluar ruang yang diduduki oleh aksara (ruang).

HTML:

<div class="container">
    <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <h3 id="Membuat-Bekas-Responsif">Membuat Bekas Responsif</h3><p>Untuk mencipta bekas responsif di mana ketinggian berubah saiz berbanding dengan lebar, anda boleh menggunakan peratusan nilai untuk sifat padding atas/bawah:</p><pre class="brush:php;toolbar:false">.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Membalut Kandungan Imej

Untuk mengelakkan ruang yang berlebihan di bahagian atas atau bawah bekas, balut imej dalam elemen pembalut dan kedudukan ia benar-benar dalam bekas untuk mengisi keseluruhan ruangnya:

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

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

Termasuk Imej dan CSS untuk Penjajaran

HTML:

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

  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
  </div>
</div>

CSS untuk penjajaran imej:

.img-container {
  text-align: center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

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

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

Alternatif untuk Keserasian Penyemak Imbas

Untuk keserasian yang lebih baik merentas penyemak imbas, anda boleh gunakan elemen div sebagai anak pertama bekas imej dan bukannya pseudo-element:

HTML:

<div class="img-container">
    <div class="centerer"></div>
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
</div>

CSS:

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

Menggunakan max-* Properties untuk Kawalan Imej

Untuk mengekalkan imej dalam bekas apabila lebarnya lebih kecil, anda boleh menggunakan ciri ketinggian maksimum dan lebar maksimum pada imej:

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}