¿Cómo puedo hacer que todas las imágenes de diferente altura y ancho sean iguales a través de CSS?

Estoy intentando crear una pared de imágenes que consta de fotos de productos. Desafortunadamente, todos tienen diferente altura y ancho. ¿Cómo puedo usar CSS para que todas las imágenes se vean del mismo tamaño? preferiblemente 100 x 100.

Estaba pensando en hacer un div que tenga una altura y un ancho de 100px y luego, de alguna manera, llenarlo. No estoy seguro de cómo hacer eso.

¿Cómo puedo lograr esto?

Respuesta actualizada (sin soporte 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">

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

¿Puedo agregar eso si distorsionas demasiado tus imágenes, es decir, las sacas de una proporción, es posible que no se vean bien, una pequeña cantidad está bien, pero una forma de hacerlo es poner las imágenes dentro de un 'contenedor' y configure el contenedor en 100 x 100, luego configure su imagen para que no se desborde, y configure el ancho más pequeño al ancho máximo del contenedor, esto recortará un poco de su imagen,

por ejemplo

<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 esta manera, la imagen mantendrá el tamaño de su contenedor, pero cambiará de tamaño sin romper las restricciones.

Forma más simple: esto mantendrá el tamaño de la imagen como está y llenará la otra área con espacio, de esta manera todas las imágenes ocuparán el mismo espacio especificado independientemente del tamaño de la imagen sin estirarse

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

}

Puede usar la object-fitpropiedad para dimensionar los imgelementos:

• coverestira o encoge la imagen proporcionalmente para llenar el contenedor. La imagen se recorta horizontalmente o verticalmente si es necesario.
• contain estira o encoge la imagen proporcionalmente para que quepa dentro del contenedor.
• scale-down encoge la imagen proporcionalmente para que quepa dentro del contenedor.

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

En el ejemplo anterior: rojo es paisaje, verde es retrato y azul es imagen cuadrada. El patrón a cuadros consta de cuadrados de 16x16px.

Para aquellos que usan Bootstrap y no quieren perder la capacidad de respuesta, simplemente no establezcan el ancho del contenedor. El siguiente código se basa en la publicación 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%;
}

O style.css

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

Puedes hacerlo de esta manera:

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

Estaba buscando una solución para este mismo problema, crear una lista de logotipos.

Se me ocurrió esta solución que usa un poco de flexbox, que funciona para nosotros ya que no nos preocupan los navegadores antiguos.

Este ejemplo asume una caja de 100x100px pero estoy bastante seguro de que el tamaño podría ser flexible / sensible.

.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 .: es posible que deba agregar algunos prefijos o usar autoprefixer.

Según la respuesta de Andi Wilkinson (la segunda), mejoré un poco, asegúrese de que se muestre el centro de la imagen (como lo hizo la respuesta aceptada):

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

Establecer parámetros de altura y ancho en el archivo 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;
 }

Hará que el tamaño de las imágenes sea el mismo que el div y puede usar la cuadrícula de arranque para manipular el tamaño del div en consecuencia

El tamaño de la imagen no depende de la altura y el ancho del div,

usar el elemento img en css

Aquí hay un código CSS que te ayuda

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

si quieres establecer el tamaño por div

utilizar esta

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

con este código, su imagen se muestra en tamaño original, pero muestra el primer desbordamiento de 100x100px que se ocultará

Sin código, es difícil ayudarte, pero aquí tienes algunos consejos prácticos:

Sospecho que su "muro de imágenes" tiene algún tipo de contenedor con una identificación o clase para darle estilos.

p.ej:

<body>

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

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

Diseñar un tamaño en todas las imágenes para su muro de imágenes, sin afectar a otras imágenes, como su logotipo, etc., es fácil si su código está configurado de manera similar a la anterior.

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

Pero si sus imágenes no son perfectamente cuadradas, se sesgarán con este método.

Vaya a su archivo CSS y cambie el tamaño de todas sus imágenes de la siguiente manera

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