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
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.
Mas información acerca de las propiedades tratadas en esta publicación:
https://developer.mozilla.org/es/docs/Web/CSS/object-fit
https://pixonauta.com/