Wie kann ich mithilfe von CSS die Mindestbreite eines Elements an seine dynamische Höhe anpassen?

Einstellen der Elementbreite basierend auf der Höhe über CSS

Problem:

Wie können Sie sicherstellen? dass die minimale Breite eines Elements seiner Höhe entspricht, ohne die Höhe explizit festzulegen? Dies ist besonders nützlich, wenn die Höhe dynamisch ist und nicht im Voraus eingestellt werden kann.

Mögliche Lösungen:

1. jQuery-Ansatz:

Mit jQuery können Sie die Mindestbreite des Elements so festlegen, dass sie mit seiner aktuellen Höhe übereinstimmt:

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

2. Nur-CSS-Ansatz (Seitenverhältnis-Trick):

Überraschenderweise ist es möglich, das gewünschte Verhalten direkt in CSS ohne JavaScript zu erreichen. Der Schlüssel besteht darin, ein zu verwenden. Element:

.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;
}

Das Das Element skaliert automatisch seine Breite, um das intrinsische Seitenverhältnis von 1:1 beizubehalten. Dies bedeutet, dass die Breite des und das darin enthaltene Element () entspricht immer der Höhe des Containers.

Anpassung:

Um das Seitenverhältnis anzupassen, passen Sie an Höhe des Element. Um beispielsweise ein Seitenverhältnis von 4:3 zu erstellen, legen Sie die Option fest. Höhe auf 133 %.

Live-Demo:

https://jsbin.com/koyuxuh/edit

Alternative Methode (Canvas oder SVG):

Sie können auch ein verwenden. oder um das Seitenverhältnisverhalten zu erstellen. Die Prinzipien bleiben die gleichen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS die Mindestbreite eines Elements an seine dynamische Höhe anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!