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

.article-img img{ 
    hauteur: 100%;
    largeur: 100%;
    position: relative;
    vertical-align: middle;
    style-bordure: aucune;
 }

Vous ferez en sorte que les images soient de la même taille que la div et vous pourrez utiliser la grille bootstrap pour manipuler la taille de la div en conséquence

Answer 2

Changez votre balise d'image avec ce style CSS.

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

Answer 3

La taille de l'image ne dépend pas de la hauteur et de la largeur de la div,

utilisez l'élément img en css

Voici le code css qui vous aidera

div img{
         width: 100px;
         height:100px;
 }

Si vous souhaitez définir la taille par la div

utilisez ceci

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

Avec ce code, votre image s'affichera dans sa taille d'origine mais seul le premier 100x100px sera visible, le reste sera masqué

Answer 4

Allez dans votre fichier CSS et redimensionnez toutes vos images comme suit

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