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

Tengo una imagen, y quiero configurar un ancho y alto específicos (en píxeles)

Pero si configuro ancho y alto usando css ( width:150px; height:100px ), la imagen se alargará y puede ser fea.

¿Cómo llenar imágenes a un tamaño específico usando CSS y no estirarlo ?

Ejemplo de imagen de relleno y estiramiento:

Imagen original:

Original

Imagen estirada:

Estirado

Imagen llena:

Lleno

Tenga en cuenta que en el ejemplo de imagen completa anterior: primero, el tamaño de la imagen cambia a 150×255 (relación de aspecto mantenida), y luego, se recortó a 150×100.

Si desea utilizar la imagen como fondo de CSS, existe una solución elegante. Simplemente use cover o contain en la propiedad CSS3 de background-size .

 
​ .container { width: 150px; height: 100px; background-image: url("http://sofes.miximages.com/image/2OrtT.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }​

Mientras que la cover le dará una imagen a escala, contain le dará una imagen reducida. Ambos preservarán la relación de aspecto de píxeles.

http://jsfiddle.net/uTHqs/ (usando la cubierta)

http://jsfiddle.net/HZ2FT/ (usando contener)

Este enfoque tiene la ventaja de ser amigable con las pantallas Retina según la guía rápida de Thomas Fuchs. http://cl.ly/0v2u190o110R

Vale la pena mencionar que el soporte de navegador para ambos atributos excluye IE6-8. http://www.quirksmode.org/css/background.html

Puede usar la propiedad css object-fit .

  .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

 

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 es necesario proporcionar los atributos de height y width en el elemento de image porque el estilo los anulará.
    así que es suficiente escribir algo como esto.

      
  2. Proporcionar width:100% en el estilo.
    Esto es útil si está utilizando el arranque y desea que la imagen extienda todo el ancho disponible.
    Especificar la propiedad de 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%; } 
 

Original:

image

Wrapped:

image

Otra solución es colocar la imagen en un contenedor con el ancho y la altura deseados. Con este método, no tendría que establecer la imagen como una imagen de fondo de un elemento.

Entonces puede hacer esto con una etiqueta img y simplemente establecer un ancho máximo y máximo alto en el elemento.

CSS:

 .imgContainer { display: block; width: 150px; height: 100px; } .imgContainer img { max-width: 100%; max-height: 100%; } 

HTML:

 

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

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

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

Aquí hay un JS Fiddle 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 que altas o más anchas que grandes.

http://jsfiddle.net/grZLR/4/

Probablemente haya una forma más elegante de hacer 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 crear un plugin de jQuery llamado Fillmore , que maneja el background-size: cover en los navegadores que lo soportan, y tiene un ajuste para aquellos que no lo hacen. ¡Dale un vistazo!

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

Usar un contenedor con desbordamiento: oculto

EDITAR: @Dominic Green me ganó.

Esto rellenará las imágenes a un tamaño específico, sin estirarlo o sin recortarlo

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