Pourquoi l'ajustement d'objet ne fonctionne-t-il pas avec les images dans les colonnes Flexbox ?

L'ajustement d'objet ne fonctionne pas dans Flexbox : dévoiler la cause

Lorsque vous utilisez flexbox pour créer des colonnes de taille égale contenant des images, en appliquant l'objet- adapter la propriété à ces images peut sembler logique pour obtenir le dimensionnement de « couverture » souhaité. Cependant, cette technique ne parvient souvent pas à produire les résultats attendus.

Selon la spécification, la propriété object-fit régit la manière dont le contenu d'un élément remplacé (dans ce cas, l'image) est ajusté dans la boîte définie. par sa hauteur et sa largeur utilisées. Cela implique que l'image elle-même fait l'objet d'un redimensionnement, et non son conteneur.

Pour rendre cette propriété efficace, nous devons restructurer notre configuration flexbox. Au lieu d'envelopper les images dans des div de conteneur, nous convertissons les images elles-mêmes en éléments flexibles. Cela permet à la propriété d'ajustement d'objet de prendre effet sur chaque image individuelle, présentant ainsi l'effet de « couverture » souhaité.

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!