Comment puis-je rendre toutes les images de hauteurs et largeurs différentes identiques via CSS ?

Question

Je suis en train de créer un mur d'images composé de photos de produits. Malheureusement, toutes ces photos ont des hauteurs et des largeurs différentes. Comment puis-je utiliser le CSS pour faire en sorte que toutes les images aient la même taille, de préférence 100 x 100 ?

Je pensais créer une div avec une hauteur et une largeur de 100px et ensuite la remplir d'une certaine manière. Je ne sais pas comment faire cela.

Comment puis-je accomplir cela ?

Answer 1

Réponse mise à jour (pas de support pour IE11)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

Réponse originale

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}

Answer 2

Moyen le plus simple - Cela maintiendra la taille de l'image telle quelle et remplira l'autre espace avec de l'espace, de cette manière toutes les images prendront le même espace spécifié sans tenir compte de la taille de l'image sans étirement

.img{
   width:100px;
   height:100px;

/*La mise à l'échelle prendra l'espace nécessaire spécifié qui est de 100px x 100px sans étirer l'image*/
    object-fit:scale-down;

}

Answer 3

Pouvons-nous juste mentionner que si vous déformez trop vos images, c'est-à-dire si vous les sortez d'un ratio, elles peuvent ne pas être correctes - une petite quantité est toutefois acceptable, mais une façon de le faire est de placer les images à l'intérieur d'un 'conteneur' et de régler le conteneur sur 100 x 100, puis définir votre image pour overflow none, et définir la largeur minimale sur la largeur maximale du conteneur, cela recadrera un peu votre image cependant,

par exemple

 Produits 

.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

Ainsi, l'image restera de la taille de son conteneur, mais se redimensionnera sans violer les contraintes

Answer 4

Vous pouvez utiliser la object-fit propriété pour dimensionner les éléments img:

• cover étire ou rétrécit l'image de manière proportionnelle pour remplir le conteneur. L'image est rognée horizontalement -ou- verticalement si nécessaire.
• contain étire ou rétrécit l'image de manière proportionnelle pour s'adapter à l'intérieur du conteneur.

• scale-down rétrécit l'image de manière proportionnelle pour s'adapter à l'intérieur du conteneur.

  .example { margin: 1em 0; text-align: center; }

  .example img { width: 30vw; height: 30vw; }

  .example-cover img { object-fit: cover; }

  .example-contain img { object-fit: contain; }

Dans l'exemple ci-dessus: le rouge est en mode paysage, le vert est en mode portrait et le bleu est une image carrée. Le motif en damier est composé de carrés de 16x16px.

Answer 5

Pour ceux qui utilisent Bootstrap et qui ne veulent pas perdre la responsivité, il suffit de ne pas définir la largeur du conteneur. Le code suivant est basé sur le post de gillytech.

index.hmtl

         plus de contenu

style.css

/*images de la même largeur*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

OU style.css

/*images de la même hauteur*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}