Ajustar imagen a su contenedor con CSS Grid

Este ejemplo ilustra la sección: Ajustar imagen a su contenedor con CSS Grid, de nuestro artículo Ajustar una imagen a su contenedor CSS Al final del mismo encontrarás el código HTML y CSS utilizados.

Para llevarlo a cabo hemos creado tres celdas de diferentes tamaños y en cada una de ellas hemos posicionado la misma imagen. La imagen se ha establecido con un ancho del 100% y una altura del 100%. La propiedad object-fit: cover; asegura que la imagen cubra todo el espacio disponible y se ajuste al tamaño del contenedor.

HTML
<div id="main">
   <div class="contenedor">
      <div id="uno" class="item">
         <img src="https://acwebstudio.com/blog/ejemplos/imagen-responsive/imagen.jpg" alt="Imagen grande" />
      </div>
   </div>
   <div class="contenedor">
      <div id="dos" class="item">
         <img src="https://acwebstudio.com/blog/ejemplos/imagen-responsive/imagen.jpg" alt="Imagen mediana" />
      </div>
   </div>
   <div class="contenedor">
      <div id="tres" class="item">
         <img src="https://acwebstudio.com/blog/ejemplos/imagen-responsive/imagen.jpg" alt="Imagen pequeña" />
      </div>
   </div>
</div>

CSS
#main {
   display:grid; 
   grid-template-columns:1fr 2fr 3fr;
   gap:1rem;
}
.contenedor {
   padding:0rem;
   display:grid;
}
.item {
   border:5px solid #333;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
}
.item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
}