Ajustar imagen a su contenedor con CSS Flexbox

Este ejemplo ilustra la sección: Ajustar imagen a su contenedor con CSS Flexbox, 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 este ejemplo hemos creado tres celdas de diferentes tamaños, y en cada una de ellas hemos posicionado la misma imagen dentro de un contenedor flexible. La propiedad display: flex; le dice al navegador que queremos usar una caja flexible. justify-content: center; y align-items: center; centran los elementos dentro del contenedor flexible tanto horizontal como verticalmente.

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; 
   align-content: stretch;
}
.contenedor {
   padding:2rem;
}
.item{
   border:1px solid #333;
   display: flex;
   justify-content: center;
   align-items: center;
}
.item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;

}
.item img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: 50% 50%;
}