Jadual Kandungan
Menjajarkan Imej secara menegak dalam Bekas Responsif
Cabarannya
Penyelesaian
Membuat Bekas Responsif
Membalut Kandungan Imej
Termasuk Imej dan CSS untuk Penjajaran
Alternatif untuk Keserasian Penyemak Imbas
Menggunakan max-* Properties untuk Kawalan Imej
Rumah hujung hadapan web tutorial css Bagaimanakah Saya Boleh Menjajarkan Imej Secara Menegak Dalam Bekas Responsif?

Bagaimanakah Saya Boleh Menjajarkan Imej Secara Menegak Dalam Bekas Responsif?

Jan 03, 2025 am 10:59 AM

How Can I Vertically Align an Image Within a Responsive Container?

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>
Salin selepas log masuk

CSS:

.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;        /* <-- reset the font property */
}
Salin selepas log masuk

Membuat Bekas Responsif

Untuk mencipta bekas responsif di mana ketinggian berubah saiz berbanding dengan lebar, anda boleh menggunakan peratusan nilai untuk sifat padding atas/bawah:

.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   */
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

Termasuk Imej dan CSS untuk Penjajaran

HTML:

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

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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="http://placehold.it/150x150" alt="">
</div>
Salin selepas log masuk

CSS:

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

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 */
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Imej Secara Menegak Dalam Bekas Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Mar 02, 2025 am 09:03 AM

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

Bekerja dengan Caching Graphql

Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Mar 08, 2025 am 09:45 AM

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres Muat naik fail dengan multer di node.js dan ekspres Mar 02, 2025 am 09:15 AM

Muat naik fail dengan multer di node.js dan ekspres

See all articles