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

Puedo simplemente tirar en que si distorsiona sus imágenes demasiado, es decir, sacarlos de una relación, puede que no se vean bien, - una pequeña cantidad está bien, pero una manera de hacer esto es poner las imágenes dentro de un 'contenedor' y establecer el contenedor en el 100 x 100, a continuación, establecer su imagen a desbordamiento ninguno, y establecer 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 permanecerá con el tamaño de su contenedor, pero se redimensionará sin romper las restricciones

Forma más sencilla: Esto mantendrá el tamaño de la imagen tal como está y llenará la otra área con espacio, de esta manera todas las imágenes tomarán el mismo espacio especificado independientemente del tamaño de la imagen sin estirar

.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 utilizar el object-fit propiedad para dimensionar los elementos img:

• cover estira o encoge la imagen proporcionalmente para llenar el contenedor. La imagen se recorta horizontal o verticalmente si es necesario.
• contain estira o encoge la imagen proporcionalmente para que quepa dentro del contenedor.
• scale-down reduce 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 consiste en cuadrados de 16x16px.

Para aquellos que usan Bootstrap y no quieren perder la responsivness simplemente no establecen el ancho del contenedor. El siguiente código se basa en 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 -->

Estilo.css

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

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

Establecer parámetros de altura y anchura en el archivo CSS

.ImageStyle{

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

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

Utilice el elemento img en css

Aquí está el código css que te ayuda

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

Si desea establecer el tamaño por div

Use esto

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

Por este código, su imagen se mostrará en el tamaño original, pero se mostrará primero 100x100px desbordamiento se ocultará

Sin código esto es difícil de ayudar, pero aquí hay algunos consejos prácticos para usted:

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

Eg:

<body>

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

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

Diseñando 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 lo anterior.

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

Pero si sus imágenes no son perfectamente cuadradas, se sesgarán usando 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;
}

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

Se me ocurrió esta solución que utiliza un poco de flexbox, que funciona para nosotros ya que no estamos preocupados por 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 necesite agregar algunos prefijos o usar autoprefixer.

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

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    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>