Come posso rendere uguali tutte le immagini di diversa altezza e larghezza tramite CSS?

Sto cercando di creare un muro di immagini composto da foto di prodotti. Sfortunatamente, tutti hanno un'altezza e una larghezza diverse. Come posso usare css per far sembrare tutte le immagini della stessa dimensione? preferibilmente 100 x 100.

Stavo pensando di fare un div che ha altezza e larghezza di 100px e poi in qualche modo come riempirlo. Non sono sicuro di come farlo.

Come posso farlo?

Risposta aggiornata (nessun supporto 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">

Risposta 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>

posso aggiungerlo se distorci troppo le tue immagini, cioè le togli da un rapporto, potrebbero non sembrare corrette, - una piccola quantità va bene, ma un modo per farlo è mettere le immagini all'interno di un "contenitore" e imposta il contenitore su 100 x 100, quindi imposta la tua immagine su nessuno trabocco e imposta la larghezza più piccola sulla larghezza massima del contenitore, questo però ritaglierà un po 'della tua immagine,

per esempio

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

In questo modo l'immagine manterrà le dimensioni del suo contenitore, ma verrà ridimensionata senza rompere i vincoli

Modo più semplice: manterrà la dimensione dell'immagine così com'è e riempirà l'altra area di spazio, in questo modo tutte le immagini occuperanno lo stesso spazio specificato indipendentemente dalle dimensioni dell'immagine senza allungarsi

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

}

È possibile utilizzare la object-fitproprietà per ridimensionare gli imgelementi:

• coverallunga o restringe l'immagine proporzionalmente per riempire il contenitore. L'immagine viene ritagliata orizzontalmente o verticalmente se necessario.
• contain allunga o restringe l'immagine proporzionalmente per adattarla al contenitore.
• scale-down restringe l'immagine proporzionalmente per adattarla al contenitore.

.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>

Nell'esempio sopra: il rosso è il paesaggio, il verde è il ritratto e il blu è l'immagine quadrata. Il motivo a scacchi è costituito da quadrati 16x16px.

Per coloro che utilizzano Bootstrap e non vogliono perdere la reattività, è sufficiente non impostare la larghezza del contenitore. Il codice seguente è basato su gillytech post.

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

OR style.css

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

Puoi farlo in questo modo:

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

Stavo cercando una soluzione per questo stesso problema, per creare un elenco di loghi.

Ho trovato questa soluzione che utilizza un po 'di flexbox, che funziona per noi poiché non siamo preoccupati per i vecchi browser.

Questo esempio presuppone una scatola di 100 x 100 px, ma sono abbastanza sicuro che la dimensione potrebbe essere flessibile / reattiva.

.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 .: potrebbe essere necessario aggiungere alcuni prefissi o utilizzare l'autoprefixer.

Sulla base della risposta di Andi Wilkinson (la seconda), ho migliorato un po ', assicurandomi che il centro dell'immagine sia mostrato (come ha fatto la risposta accettata):

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

Imposta i parametri di altezza e larghezza nel file 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;
 }

Renderai le dimensioni delle immagini uguali a div e potrai utilizzare la griglia bootstrap per manipolare le dimensioni del div di conseguenza

La dimensione dell'immagine non dipende dall'altezza e dalla larghezza del div,

usa l'elemento img in css

Ecco il codice css che ti aiuta

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

se vuoi impostare la dimensione per div

Usa questo

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

con questo codice la tua immagine viene mostrata nella dimensione originale ma il primo overflow di 100x100px verrà nascosto

Senza codice è difficile aiutarti, ma ecco alcuni consigli pratici per te:

Sospetto che il tuo "muro di immagini" abbia una sorta di contenitore con un id o una classe per dargli stili.

per esempio:

<body>

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

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

Definire una dimensione su tutte le immagini per il tuo muro di immagini, senza influire su altre immagini, come il tuo logo, ecc. È facile se il tuo codice è impostato in modo simile a quanto sopra.

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

Ma se le tue immagini non sono perfettamente quadrate, verranno distorte usando questo metodo.

Vai al tuo file CSS e ridimensiona tutte le tue immagini come segue

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