Comment utiliser CSS pour redimensionner automatiquement la hauteur d'une image

Nous savons que dans les mises en page de listes images telles que le flux en cascade, vous pouvez souvent voir l'utilisation de CSS pour contrôler la largeur et la hauteur des images dans les DIV. En fait, une telle mise en page est très simple. Je vais vous l'expliquer en détail aujourd'hui.

Lorsque nous rencontrons une telle mise en page CSS DIV, c'est en fait très simple. Il suffit de contrôler la largeur de l'image, et la hauteur de l'image n'a pas besoin d'être définie, c'est-à-dire la hauteur de. l'image s'adaptera automatiquement au rapport de mise à l'échelle (si la hauteur n'est pas définie, la valeur de hauteur par défaut est auto-adaptative).

Comme indiqué ci-dessus, ajoutez une boîte DIV nommée ".imgbox" avec CSS et la largeur de l'image est de 252 pixels. À ce stade, comment écrire du CSS pour définir la hauteur de l'image dans le . l'objet est automatiquement mis à l'échelle en fonction de la largeur :

.imgbox img{width:252px}

C'est aussi simple que celaLe sélecteur CSS peut contrôler la largeur de l'image dans la boîte DIV ".imgbox" , sans définir le style CSS height (height), afin que l'image par défaut soit adaptée à la largeur.

Résumé :

Pour les novices, ils peuvent oublier que la largeur et la hauteur sont adaptatives par défaut si elles ne sont pas définies, ils peuvent donc rencontrer le problème de définition de la largeur de l'image, ils doivent donc la définir Une pensée si figée. En fait, sous l'exigence d'une largeur d'image fixe et d'une hauteur adaptative dans la mise en page CSS, CSS n'a besoin que de définir la valeur de largeur, et la hauteur peut obtenir l'effet de mise en page souhaité sans ajouter de paramètres.

Si la hauteur et la largeur de l'image sont fixes dans la mise en page, quelle que soit la taille ou la proportionnalité de l'image, la largeur et la hauteur de l'image dans la mise en page sont fixes. Dans ce cas, vous devez définir un. largeur et hauteur fixes de l'image en même temps.

Je pense que vous maîtrisez les méthodes après avoir lu ces analyses. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer une hauteur adaptative DIV

en HTML Comment utiliser CSS pour masquer les divs

Explication détaillée de la mise en page réactive frontale, des images réactives et du système de grille créé par vos soins

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!