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

Vous pouvez le faire de cette manière :

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}

Answer 2

Définir les paramètres de hauteur et de largeur dans le fichier CSS

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;

}

Answer 3

J'étais à la recherche d'une solution pour ce même problème, afin de créer une liste de logos.

J'ai trouvé cette solution qui utilise un peu de flexbox, ce qui fonctionne pour nous puisque nous ne nous soucions pas des anciens navigateurs.

Cet exemple suppose une boîte de 100x100px mais je suis assez sûr que la taille pourrait être flexible / responsive.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

ps.: vous devrez peut-être ajouter certains préfixes ou utiliser autoprefixer.

Answer 4

Sans code, il est difficile de vous aider mais voici quelques conseils pratiques :

Je soupçonne que votre "image wall" a un conteneur avec un identifiant ou une classe pour lui donner des styles.

par exemple:

Styler une taille sur toutes les images pour votre mur d'images, sans affecter les autres images, comme votre logo, etc. est facile si votre code est configuré de la même manière que ci-dessus.

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

Mais si vos images ne sont pas parfaitement carrées, elles seront déformées en utilisant cette méthode.

Answer 5

Basé sur la réponse d'Andi Wilkinson (la deuxième), j'ai apporté quelques améliorations pour m'assurer que le centre de l'image est affiché (comme l'a fait la réponse acceptée) :

HTML :

CSS :

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}