Tamaño de imagen CSS, ¿cómo rellenar, pero no estirar?

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

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

¿Cómo rellenar imágenes a un tamaño específico usando CSS y sin estirarlas ?

Ejemplo de imagen de relleno y estiramiento:

Imagen original:

Original

Imagen estirada:

Estirado

Imagen llena:

Completado

Tenga en cuenta que en el ejemplo de imagen rellena anterior: primero, se cambia el tamaño de la imagen a 150x255 (relación de aspecto mantenida) y luego se recorta a 150x100.

Aug 01 '12 17:08 Mahdi Ghiasi

Puedes usar la propiedad css object-fit. ("establece cómo se debe cambiar el tamaño del contenido de un elemento reemplazado, como <img>o <video>, para que se ajuste a su contenedor").

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

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

Expandir fragmento

Ver ejemplo aquí

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

Relacionado: (especifica la alineación del contenido de un elemento dentro de su cuadro).object-position

Mar 17 '2015 15:03 afonsoduarte

Si desea utilizar la imagen como fondo CSS, existe una solución elegante. Simplemente use covero containen la background-sizepropiedad CSS3.

.container {
  width: 150px;
  height: 100px;
  background-image: url("https://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>

Expandir fragmento

Si bien coverle dará una imagen ampliada, containle dará una imagen reducida. Ambos conservarán la relación de aspecto de píxeles.

http://jsfiddle.net/uTHqs/ (usando portada)

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

Este enfoque tiene la ventaja de ser compatible con las pantallas Retina según la guía rápida de Thomas Fuchs.

Vale la pena mencionar que la compatibilidad del navegador con ambos atributos excluye IE6-8.

Aug 01 '2012 16:08 Marcelo De Polli

Mejora de la respuesta aceptada por @afonsoduarte .
en caso de que estés usando bootstrap

Hay tres diferencias:

Proporcionando width:100%estilo.
Esto es útil si está utilizando bootstrap y desea que la imagen se extienda todo el ancho disponible.

Especificar la heightpropiedad es opcional. Puede eliminarla o conservarla según lo necesite.

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

Por cierto, NO es necesario proporcionar los atributos heighty widthen el imageelemento porque serán anulados por el estilo.
así que basta con escribir algo como esto.
```
<img class="cover" src="url to img ..."  />
```

Mar 24 '2017 13:03 Hakan Fıstık

La única forma 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 una molestia 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/

Aug 01 '2012 10:08 Dominic Green