Como posso fazer com que todas as imagens de alturas e larguras diferentes sejam iguais via CSS?

Estou tentando criar uma parede de imagens com fotos de produtos. Infelizmente, todos eles têm alturas e larguras diferentes. Como posso usar css para fazer com que todas as imagens tenham o mesmo tamanho? de preferência 100 x 100.

Eu estava pensando em fazer um div com altura e largura de 100px e, em seguida, preenchê-lo de alguma forma. NÃO tenho certeza de como fazer isso.

Como posso fazer isso?

Resposta atualizada (sem suporte para 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">

Resposta original

.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 apenas acrescentar isso se você distorcer demais suas imagens, ou seja, tirá-las de uma proporção, elas podem não parecer certas, - uma pequena quantidade está bem, mas uma maneira de fazer isso é colocar as imagens dentro de um 'contêiner' e definir o contêiner para 100 x 100, em seguida, definir sua imagem para não estourar nenhum, e definir a menor largura para a largura máxima do contêiner, isso cortará um pouco de sua imagem,

por exemplo

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

Dessa forma, a imagem permanecerá do tamanho de seu contêiner, mas será redimensionada sem quebrar as restrições

Maneira mais simples - Isto irá manter o tamanho da imagem como está e preencher a outra área com espaço, desta forma todas as imagens irão ocupar o mesmo espaço especificado independentemente do tamanho da imagem sem esticar

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

}

Você pode usar a object-fitpropriedade para dimensionar os imgelementos:

• coveraumenta ou diminui a imagem proporcionalmente para preencher o contêiner. A imagem é cortada horizontalmente -ou- verticalmente, se necessário.
• contain aumenta ou diminui a imagem proporcionalmente para caber dentro do contêiner.
• scale-down reduz a imagem proporcionalmente para caber dentro do contêiner.

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

No exemplo acima: vermelho é paisagem, verde é retrato e azul é imagem quadrada. O padrão quadriculado consiste em quadrados de 16x16px.

Para quem usa Bootstrap e não quer perder a responsividade basta não definir a largura do container. O código a seguir é baseado na postagem 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%;
}

OR style.css

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

Você pode fazer desta forma:

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

Estava procurando uma solução para este mesmo problema, criar uma lista de logotipos.

Eu vim com essa solução que usa um pouco de flexbox, que funciona para nós já que não estamos preocupados com navegadores antigos.

Este exemplo assume uma caixa de 100x100px, mas tenho certeza de que o tamanho pode ser flexível / responsivo.

.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 .: pode ser necessário adicionar alguns prefixos ou usar o autoprefixer.

Com base na resposta de Andi Wilkinson (a segunda), melhorei um pouco, certifique-se de que o centro da imagem seja mostrado (como a resposta aceita):

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

Defina os parâmetros de altura e largura no arquivo 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;
 }

Você fará as imagens com o mesmo tamanho do div e poderá usar a grade de inicialização para manipular o tamanho do div de acordo

O tamanho da imagem não depende da altura e largura div,

usar elemento img em css

Aqui está o código css que ajuda você

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

se você quiser definir o tamanho por div

usa isto

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

por este código, sua imagem é exibida no tamanho original, mas mostra os primeiros 100x100px que o estouro irá ocultar

Sem código, é difícil ajudá-lo, mas aqui estão alguns conselhos práticos para você:

Suspeito que sua "parede de imagem" tenha algum tipo de recipiente com um id ou classe para dar estilos.

por exemplo:

<body>

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

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

Definir um tamanho em todas as imagens para sua parede de imagens, sem afetar outras imagens, como seu logotipo, etc., é fácil se o seu código for configurado de forma semelhante ao acima.

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

Mas se suas imagens não estiverem perfeitamente quadradas, elas serão distorcidas usando este método.

Vá para o seu arquivo CSS e redimensione todas as suas imagens da seguinte maneira

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