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

Luego de consultar con especialistas en el tema, programadores de varias áreas y maestros hemos dado con la solución a la cuestión y la dejamos plasmada en esta publicación.

Solución:

Puedes 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

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

.container 
  width: 150px;
  height: 100px;
  background-image: url("https://foroayuda2.foroayuda.es/wp-content/uploads/2023/03/0-tamano-de-imagen-css-¿como-rellenar-pero-no-estirar.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;

​

Tiempo cover le dará una imagen ampliada, contain le 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 el soporte del navegador para ambos attributes excluye IE6-8.

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

---

Hay tres diferencias:

1. Proporcionar width:100% en el estilo
   Esto es útil si está utilizando oreja y quiero que la imagen se estire todo el ancho disponible.

2. Especificando el height La propiedad es opcional, puede eliminarla o mantenerla según lo necesite.

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

3. Por cierto, NO hay necesidad de proporcionar el height y width attributes sobre el image elemento porque serán anulados por el estilo.
   por lo que es suficiente para escribir algo como esto.

Nos puedes añadir valor a nuestra información contribuyendo tu experiencia en las crónicas.

---

---

Utiliza Nuestro Buscador