Hacer que la imagen en el elemento de imagen se ajuste a su contenedor

Hola, encontramos la solución a tu pregunta, has scroll y la obtendrás más abajo.

Solución:

tienes que usar display:flex en el elemento ‘imagen’ (junto con object-fit propiedad para el ‘img’)

Esto funcionará, para cualquier tamaño de contenedor.

al igual que:

#container 
  background: steelblue;
  width: 333px;
  height: 500px;
  

picture 
  width: 100%;
  height: 100%;
  display: flex;
 

picture img 
 object-fit: cover; 
    height: auto;
    width:100%;

Comentarios y valoraciones

Recuerda algo, que tienes la capacidad de añadir una evaluación objetiva si te fue de ayuda.

---

---

Utiliza Nuestro Buscador