Comment puis-je rendre la largeur minimale d'un élément égale à sa hauteur dynamique à l'aide de CSS ?

Définition de la largeur de l'élément en fonction de la hauteur via CSS

Problème :

Comment pouvez-vous vous assurer que la largeur minimale d'un élément est égale à sa hauteur, sans définir explicitement la hauteur ? Ceci est particulièrement utile lorsque la hauteur est dynamique et ne peut pas être réglée à l'avance.

Solutions possibles :

1. Approche jQuery :

En utilisant jQuery, vous pouvez définir la largeur minimale de l'élément pour qu'elle corresponde à sa hauteur actuelle :

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

2. Approche CSS uniquement (Aspect Ratio Trick) :

Étonnamment, il est possible d'obtenir le comportement souhaité directement en CSS sans JavaScript. La clé est d'utiliser un élément :

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

L'élément L’élément mettra automatiquement à l’échelle sa largeur pour conserver son rapport hauteur/largeur intrinsèque de 1:1. Cela signifie que la largeur du champ et l'élément qu'il contient () sera toujours égal à la hauteur du conteneur.

Personnalisation :

Pour personnaliser le rapport hauteur/largeur, ajustez le hauteur du élément. Par exemple, pour créer un format d'image 4:3, définissez le paramètre hauteur à 133%.

Démo en direct :

https://jsbin.com/koyuxuh/edit

Méthode alternative (Canvas ou SVG) :

Vous pouvez également utiliser un ou pour créer le comportement des proportions. Les principes restent les mêmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!