Bagaimanakah Saya Boleh Jadikan Lebar Minimum Elemen Sama dengan Tinggi Dinamiknya Menggunakan CSS?

Menetapkan Lebar Elemen Berdasarkan Tinggi Melalui CSS

Masalah:

Bagaimana anda boleh memastikan bahawa lebar minimum elemen sama dengan ketinggiannya, tanpa menetapkan ketinggian secara eksplisit? Ini amat berguna apabila ketinggian adalah dinamik dan tidak boleh ditetapkan di hadapan.

Penyelesaian Kemungkinan:

1. Pendekatan jQuery:

Menggunakan jQuery, anda boleh menetapkan lebar minimum elemen agar sepadan dengan ketinggian semasanya:

$(document).ready(function() {
    $('.myClass').each(function() {
        $(this).css('min-width', $(this).css('height'));
    });
});

2. Pendekatan CSS Sahaja (Tipu Nisbah Aspek):

Anehnya, adalah mungkin untuk mencapai tingkah laku yang diingini secara langsung dalam CSS tanpa JavaScript. Kuncinya ialah menggunakan elemen:

.container {
    position: relative;
    display: inline-block;
    height: 50vh; /* Adjust this based on desired height */
}

.container > img {
    height: 100%; /* Inherits container's height */
}

.contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

elemen akan secara automatik menskalakan lebarnya untuk mengekalkan nisbah aspek intrinsiknya 1:1. Ini bermakna bahawa lebar dan elemen yang terkandung di dalamnya () akan sentiasa sama dengan ketinggian bekas.

Penyesuaian:

Untuk menyesuaikan nisbah bidang, laraskan ketinggian unsur. Contohnya, untuk mencipta nisbah bidang 4:3, tetapkan ketinggian hingga 133%.

Demo Langsung:

https://jsbin.com/koyukuh/edit

Kaedah Ganti (Kanvas atau SVG):

Anda juga boleh menggunakan atau untuk mencipta tingkah laku nisbah aspek. Prinsipnya tetap sama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jadikan Lebar Minimum Elemen Sama dengan Tinggi Dinamiknya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!