CSS Tamaño de la imagen, cómo llenar, no estirar?

Puede usar la propiedad css object-fit.

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

Ver ejemplo aquí

Hay un polyfill para IE: https://github.com/anselmh/object-fit

La única manera real es tener un contenedor alrededor de su imagen y usar overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Es un dolor en CSS hacer lo que quieres y centrar la imagen, hay una solución rápida en jquery como:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

Http://jsfiddle.net/x86Q7/2 /

En realidad, esto es solo una derivación de la respuesta más votada de esta pregunta (no la aceptada).

Hay dos diferencias:

1. NO hay necesidad de proporcionar los atributos height y width en el elemento image porque serán anulados por el estilo.
   así que es suficiente escribir algo como esto.

   <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" />
   

2. , Proporcionando width:100% en el estilo.
   Esto es útil si está utilizando bootstrap y desea que la imagen se extienda todo el ancho disponible.
   Especificar la propiedad height es opcional, pero en mi caso, fue algo bueno.

   .cover {
      object-fit: cover;
      width: 100%;
      height: 300px; /* optional, but in my case it was good */
   }
   

Solución CSS sin JS y sin imagen de fondo:

Método 1 "margen automático" (IE8+ - NO FF!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

Http://jsfiddle.net/5xjr05dt /

Método 2 "transformar" (IE9+ ):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

Http://jsfiddle.net/5xjr05dt/1 /

El método 2 se puede usar para centrar una imagen en un contenedor de ancho / alto fijo. Ambos pueden desbordarse - y si la imagen es más pequeño que el contenedor todavía estará centrado.

Http://jsfiddle.net/5xjr05dt/3 /

Método 3 "doble envoltura" (IE8+ - NO FF! ):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

Http://jsfiddle.net/5xjr05dt/5 /

Método 4 "doble envoltura Y doble imagen" (IE8+ ):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

Http://jsfiddle.net/5xjr05dt/26 /

• El método 1 tiene un soporte ligeramente mejor - usted tiene que establecer el ancho O la altura de la imagen!
• Con los prefijos el método 2 también tiene soporte decente (desde ie9 hacia arriba) - ¡El método 2 no tiene soporte en Opera mini!
• El método 3 utiliza dos envoltorios: ancho Y alto de desbordamiento de la lata.
• El método 4 utiliza una imagen doble ( una como marcador de posición), lo que proporciona una sobrecarga de ancho de banda adicional, pero aún mejor soporte para crossbrowser.

Los métodos 1 y 3 no parecen funcionar con Firefox

Otra solución es poner la imagen en un contenedor con el ancho y alto deseados. Usando este método no tendría que establecer la imagen como imagen de fondo de un elemento.

Entonces puede hacer esto con una etiqueta img y simplemente establecer un max-width y max-height en el elemento.

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

Ahora, cuando cambie el tamaño del contenedor, la imagen crecerá automáticamente lo más grande que pueda sin salirse de los límites o distorsionar.

Si desea centrar la imagen vertical y horizontalmente, puede cambiar el css del contenedor a:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

Aquí hay un violín JS http://jsfiddle.net/9kUYC/2 /

Partiendo de la respuesta de @Dominic Green usando jQuery, aquí hay una solución que debería funcionar para imágenes que son más anchas de lo que son altas o más altas de lo que son anchas.

Http://jsfiddle.net/grZLR/4 /

Probablemente hay una forma más elegante de hacer el JavaScript, pero esto funciona.

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

Ayudé a construir un plugin de jQuery llamado Fillmore , que maneja el background-size: cover en los navegadores que lo soportan, y tiene una cuña para aquellos que no lo hacen.

Intenta algo como esto: http://jsfiddle.net/D7E3E/4 /

Usando un contenedor con desbordamiento: oculto

EDITAR: @Dominic Green me venció.

Esto llenará las imágenes a un tamaño específico, sin estirarlas o sin recortarlas

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

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

Creo que es bastante tarde para esta respuesta. De todos modos espero que esto ayude a alguien en el futuro. Me enfrenté al problema de colocar las tarjetas en angular. Hay tarjetas que se muestran para la matriz de eventos. Si el ancho de la imagen del evento es grande para la tarjeta, la imagen debe mostrarse recortando desde dos lados y la altura del 100%. Si la altura de la imagen es larga, la parte inferior de las imágenes se recorta y el ancho es del 100%. Aquí está mi solución css pura para esto:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}