Bagaimanakah Saya Boleh Mengisi Div Secara Berkadar dengan Imej Menggunakan Flexbox?

Mengisi Div dengan Imej Secara Berkadar

Dalam usaha untuk mencipta reka bentuk web responsif, cabaran biasa timbul dalam mengisi elemen div dengan imej sambil mengekalkan nisbah bidangnya. Apabila imej berbeza dalam orientasi antara potret dan landskap, ia menjadi sukar untuk mengubah saiznya dengan lancar sambil menghormati perkadaran asalnya.

Untuk menangani perkara ini, CSS menawarkan penyelesaian menggunakan flexbox. Dengan menggunakan CSS flexbox, anda boleh mencapai hasil yang diingini dengan beberapa baris kod.

Flexbox to the Rescue

Flexbox ialah modul reka letak CSS yang menyediakan fleksibel dan cara yang cekap untuk mengagihkan dan mengurus ruang dalam elemen kontena. Dalam kes ini, ia boleh digunakan untuk memastikan imej sentiasa memenuhi div bekas, tanpa mengira nisbah bidangnya.

Pelaksanaan

Pertimbangkan penanda HTML berikut:

<div class="container">
    <img src="some-image.jpg" alt="Could be portrait or landscape" />
</div>

Untuk mencapai tingkah laku yang diingini, gunakan gaya CSS berikut pada elemen:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.container img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

Penjelasan

• .bekas:

  • paparan: flex: Mendayakan flexbox pada div kontena.
  • justify-content: tengah; align-items: center;: Memusatkan imej dalam div.
  • overflow: hidden: Menyembunyikan mana-mana bahagian imej yang melimpahi bekas.

• .container img:

  • flex-shrink: 0;: Menghalang imej daripada mengecut apabila bekas berubah saiz.
  • lebar min: 100%; ketinggian min: 100%;: Memastikan imej sentiasa mengembang kepada sekurang-kurangnya saiz bekas.

Hasil

Dengan gaya CSS ini dilaksanakan, imej akan mengisi div bekas secara automatik sambil mengekalkan nisbah bidangnya. Jika imej adalah potret, lebarnya ialah 100%, dan ketinggiannya akan dilaraskan secara berkadar. Begitu juga, jika imej adalah landskap, ketinggiannya ialah 100% dan lebarnya akan dilaraskan dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengisi Div Secara Berkadar dengan Imej Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!