Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Div Responsif, Berbentuk Segi Empat dalam CSS?

Bagaimana untuk Mencipta Div Responsif, Berbentuk Segi Empat dalam CSS?

Patricia Arquette
Patricia Arquetteasal
2024-11-10 18:44:03878semak imbas

How to Create a Responsive, Square-Shaped Div in CSS?

Mencipta Div Responsif, Berbentuk Segi Empat

Soalan:

Bagaimana anda boleh mereka bentuk elemen div dalam CSS untuk mengekalkan nisbah aspek segi empat sama, melaraskan ketinggiannya secara berkadar dengan lebarnya, apabila elemen induk berubah saiz?

Jawapan:

Terdapat teknik mudah untuk mencapainya menggunakan pelapik:

  1. Tetapkan ketinggian div kepada 0. Ini "memperdayakan" penyemak imbas untuk menjadikan ketinggian itu fleksibel.
  2. Tentukan lebar div sebagai peratusan.
  3. Tetapkan bahagian bawah padding kepada peratusan yang sama dengan lebar. Ini memaksa penyemak imbas melaraskan ketinggian untuk mengekalkan nisbah bidang segi empat sama.

Berikut ialah contoh kod:

<div>

Div paling luar membentuk bentuk segi empat sama, manakala div dalam mengandungi kandungan sebenar. Pendekatan ini berkesan mengekalkan nisbah aspek segi empat sama apabila lebar elemen induk berubah. Ia serasi dengan kebanyakan penyemak imbas.

Contoh langsung boleh didapati di jsfiddle: [masukkan pautan jsfiddle di sini]

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Responsif, Berbentuk Segi Empat dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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