Comment empêcher les barres de défilement avec l'ajustement d'objet : contenir dans des conteneurs Flexbox ?

Ajustement d'objet CSS : Contenir préserve les dimensions de l'image dans la mise en page

Problème :

Quand en utilisant object-fit : contain pour redimensionner les images dans les conteneurs flexbox, les images s'ajustent de manière réactive, mais la largeur de l'image d'origine reste, ce qui entraîne l'apparition de barres de défilement.

Exploration :

object-fit définit comment une image doit se comporter lorsque son conteneur a des dimensions différentes de celles de l'image elle-même. object-fit : contain garantit que l'image tient dans le conteneur sans recadrage, en gardant son rapport hauteur/largeur intact.

Attributs CSS manquants :

Pour résoudre le problème, des Les attributs CSS sont requis pour spécifier la largeur et la hauteur du conteneur.

Solution :

Au lieu de vous fier à la largeur d'origine de l'image, définissez explicitement la largeur du conteneur en utilisant width . De plus, spécifiez la hauteur du conteneur pour qu'elle corresponde au rapport hauteur/largeur de l'image en utilisant la hauteur.

Code CSS mis à jour :

<code class="css">.half-containers {
  flex: 0 1 50%;
  width: 50%;  /* Specify explicit width for the container */
  height: calc(50% / aspect-ratio);  /* Calculate height based on aspect ratio */
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}</code>

Explication du concept :

En définissant explicitement la largeur et la hauteur du conteneur, nous garantissons que l'image peut être mise à l'échelle dans les dimensions définies tout en conservant ses proportions. La hauteur calculée garantit que l'image s'adapte à l'intérieur du conteneur sans la déformer, même lorsque sa largeur d'origine dépasse la largeur du conteneur.

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!