Ajustar imágenes al tamaño del contenedor con CSS

Existen varias técnicas para lograr ajustar imágenes al tamaño del contenedor con CSS, dependiendo de tus necesidades unas podrían servirte más que otras, aquí te mostrare un par de formas que me han sido de utilidad para diversos proyectos:

1- Usando Object-fit

2- Usando Background-image

1- Usando Object-fit

Aplicamos Object-fit cuando deseamos utilizar un elemento <img> y encajarlo a su contenedor padre. De esta forma la imagen podria beneficiarse de Lazy-loading (carga diferida) si fuera aplicado en el sitio y también ser detectada para efectos de SEO.

/*Supongamos que nuestro contenedor mide 150px x 150px*/
.contenedor{
  width:150px;
  height:150px;
}
/*Aplicamos la propiedad object-fit cover, ajustar su tamaño y no perder la proporcion de nuestra imagen*/
img{
  object-fit: cover;
  width:100%;
  height:100%;
}

  <div class="contenedor">
    <img src="https://images.pexels.com/photos/4681107/pexels-photo-4681107.jpeg" alt="perrito">
  </div>

Puedes probarlo con este ejemplo en Codepen:

See the Pen Fit images with css (Object-fit) by Angel Mavare (@angelmavare) on CodePen.

2- Usando Background-image

Con background-img podemos colocar una imagen como fondo del contenedor y ajustarla para que acople su tamaño al mismo, esta técnica no se beneficia del lazy-loading pero es igualmente valida para el objetivo visual que queremos.

/*Supongamos que nuestro contenedor mide 150px x 150px*/
.contenedor{
  width:150px;
  height:150px;
  background-image: url('<https://images.pexels.com/photos/4681107/pexels-photo-4681107.jpeg>');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;	
}

<div class="contenedor"></div>

Echale un vistazo al codepen:

See the Pen Untitled by Angel Mavare (@angelmavare) on CodePen.

Espero que estos ejemplos para ajustar imágenes al tamaño del contenedor con CSS hayan sido de tu utilidad, comparte la publicación con alguien que la necesite y recuerda que puedes encontrar mas artículos como este en

• Snippets
• Desarrollo Web

Mas información acerca de las propiedades que te he mostrado:

developer.mozilla.org – object-fit