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

J'essaie de créer un mur d'images composé de photos de produits. Malheureusement, tous sont de hauteur et de largeur différentes. Comment puis-je utiliser le CSS pour que toutes les images aient la même taille? de préférence 100 x 100.

Je pensais faire un div qui a une hauteur et une largeur de 100px, puis comment le remplir. PAS sûr de savoir comment faire cela.

Comment puis-je accomplir cela?

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

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

<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Réponse originale

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

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

puis-je simplement ajouter que si vous déformez trop vos images, c'est-à-dire que vous les retirez d'un rapport, elles peuvent ne pas sembler correctes, - une petite quantité suffit, mais une façon de le faire est de mettre les images dans un 'conteneur' et définissez le conteneur sur 100 x 100, puis définissez votre image sur aucun débordement, et définissez la plus petite largeur sur la largeur maximale du conteneur, cela recadrera un peu de votre image,

par exemple

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



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

De cette façon, l'image conservera la taille de son conteneur, mais se redimensionnera sans casser les contraintes

Méthode la plus simple - Cela gardera la taille de l'image telle quelle et remplira l'autre zone d'espace, de cette façon toutes les images prendront le même espace spécifié quelle que soit la taille de l'image sans étirement

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

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

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

• coverétire ou rétrécit l'image proportionnellement pour remplir le conteneur. L'image est recadrée horizontalement - ou verticalement si nécessaire.
• contain étire ou rétrécit l'image proportionnellement pour s'adapter à l'intérieur du conteneur.
• scale-down réduit l'image proportionnellement 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;
}

<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

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

Pour ceux qui utilisent Bootstrap et ne veulent pas perdre la réactivité, ne définissez tout simplement pas la largeur du conteneur. Le code suivant est basé sur le post de gillytech .

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

OU style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

Vous pouvez le faire de cette façon:

 .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%;
}

Je cherchais une solution à ce même problème, pour créer une liste de logos.

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

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

.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 des préfixes ou utiliser un autoprefixer.

Sur la base de la réponse d'Andi Wilkinson (la deuxième), je me suis un peu amélioré, assurez-vous que le centre de l'image est affiché (comme la réponse acceptée l'a fait):

HTML:

<div class="crop">
   <img src="img.png">
</div>

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+ */
}

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;
    
}

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Vous allez faire des images la même taille que div et vous pouvez utiliser la grille bootstrap pour manipuler la taille div en conséquence

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

utiliser l'élément img en css

Voici le code css qui vous aide

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

si vous voulez définir la taille par div

utilisez ceci

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

par ce code, votre image s'affiche dans sa taille d'origine, mais le premier débordement de 100x100px sera masqué

Sans code c'est difficile de vous aider mais voici quelques conseils pratiques pour vous:

Je soupçonne que votre "mur d'images" a une sorte de conteneur avec un identifiant ou une classe pour lui donner des styles.

par exemple:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Le style d'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 biaisées en utilisant cette méthode.

Accédez à votre fichier CSS et redimensionnez toutes vos images comme suit

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