


Bagaimanakah Saya Boleh Menjajarkan Imej Secara Menegak Dalam Bekas Responsif?
Jan 03, 2025 am 10:59 AMMenjajarkan 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
- Buat elemen pseudo blok sebaris sebagai anak pertama (atau terakhir) elemen bekas dan tetapkan ketinggiannya kepada 100% untuk menduduki keseluruhan ketinggian bekas.
- Tetapkan penjajaran menegak: tengah kepada kedua-dua elemen pseudo dan imej untuk memusatkan elemen secara menegak.
- 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>
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 */ }
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 */ }
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="http://placehold.it/150x150" 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="http://placehold.it/150x150" 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 */ }
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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

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

Muat naik fail dengan multer di node.js dan ekspres
