Comment obtenir un design réactif tout en conservant des dimensions d'image fixes ?

Question

J'ai le CSS suivant (en utilisant Bootstrap) pour redimensionner une image afin qu'elle tienne dans un conteneur 16:9 sans l'étirer :

<span class="bg-dark d-flex justifier-content-center align-items-center style="width: 384px;
hauteur : 216px">
                <img
                  :src="slotProps.item.itemImageSrc"
                  :alt="slotProps.item.alt"
                  style="largeur maximale : 100 % ; hauteur maximale : 100 %"
                />
              </span>

Cette méthode fonctionne, mais lorsque je l'utilise dans une grille Bootstrap, l'image déborde de la grille (je pense parce que j'ai fixé la taille avec des valeurs absolues). Comment puis-je redimensionner l’image sans la déborder ?

(Informations de base : ceci est utilisé dans un composant de galerie, les images qui arrivent peuvent être de tailles différentes, je dois donc toutes les redimensionner pour les afficher dans le même conteneur de taille, il peut y en avoir des noires en haut ou marge inférieure)

Answer 1

Pour résoudre ce problème, vous pouvez utiliser object-fit propriétés CSS. L'attribut object-fit spécifie comment l'image doit être redimensionnée pour s'adapter à son conteneur. La valeur de couverture redimensionnera l'image pour remplir tout le conteneur tout en conservant son rapport hauteur/largeur.

<span class="bg-dark d-flex justify-content-center align-items-center">
  <img
    :src="slotProps.item.itemImageSrc"
    :alt="slotProps.item.alt"
    style="object-fit: cover; max-width: 100%; max-height: 100%"
  />
</span>