Luis Alejandro Ortega Bermudez
Preguntautilice diferentes tipos de fotos, pero algunas se recortan. ¿como podría ajustarla para que todas queden del mismo tamaño?
- Limitamos el height de cada fila de la grid, en este caso le puse 200px, tú puedes limitarlo al tamaño que quieras:
- Le decimos al contenedor de la imagen que abarque el 100% de su padre (abarcará el height de la fila que fue lo que limitamos)
- Con esto hacemos la magia, le decimos a la imagen que abarque el 100% de su padre (en este caso es .post-image) tanto en width como en height, esto distorsionará la imagen, entonces, para decirle que no se distorsione, agregamos
object-fit: cover;
- Limitamos el height de cada fila de la grid, en este caso le puse 200px, tú puedes limitarlo al tamaño que quieras:
- Agregamos un para que todo lo que se salga de los contenedores de la imagen quede oculto (esto porque aquí dejamos que las imágenes se extiendan todo lo que quieran, por lo que se desbordaran, overflow hidden ocultará ese desbordamiento.
overflow: hidden;
- Ajustamos el contenedor de la imagen al 100% y mediante Flexbox la centramos, esto hará que lo que se visualice sea el centro de la imagen:
- Ahora, esto está tomando los tamaños originales de las imágenes, por lo que puede que no se vean bien, si quieres jugar con ello, puedes jugar con el width de la imagen poniéndole siempre un width mayor a 100%:
Luis Alejandro Ortega Bermudez
uff muchas gracias !!! esto me va ayudar bastante.

Carlos Eduardo Gomez García
PD. Agrega un espacio entre ".post-image" y "img", por alguna razón Platzi le quita los espacios

Carlos Eduardo Gomez García
Vale, te compartiré dos formas que encontré para hacerlo:
Primera forma
.post-list { display: grid; grid-template-columns: repeat(3, minmax(100px , 293px)); justify-content: center; gap: 3px; grid-auto-rows: 200px; }
.post-image { height: 100%; }
.post-image img{ width: 100%; height: 100%; object-fit: cover; vertical-align: top; }
En mi caso queda así:
Yo te recomendaría que hagas el height del row responsive porque en ciertos tamaños de dispositivos puede quedar muy rectangular.
*Segunda forma
Esta forma me gusta un poquito más jaja
.post-list { display: grid; grid-template-columns: repeat(3, minmax(100px , 293px)); justify-content: center; gap: 3px; grid-auto-rows: 200px; }
.post { position: relative; cursor: pointer; display: block; overflow: hidden; }
.post-image { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; }
.post-image img{ width: 200%; vertical-align: top; }
A mí me queda así:
Ya es cuestión de que juegues con los valores ^^
Luis Alejandro Ortega Bermudez
@RetaxMaster jajaja si , siempre intento en cada proyecto aplicar conocimientos previos que he aprendido en la ruta de aprendizaje mira acá esta el link: https://github.com/Luis-star54/instagram-clone/tree/master estoy desarrollando este proyecto con el estándar mobile first asi que todavía no he hecho los media Query :p muchas gracias , tratare de aplicar tu recomendación.

Carlos Eduardo Gomez García
Hey! Construiste el resto de la interfaz, felicidades jaja, en Instagram las fotos son cuadradas, y tienen un tamaño fijo.
En tu caso estás usando imágenes de diferente tamaño, y está bien, solo tienes que adaptarlas para que abarquen un cuadrado perfecto.
A simple vista no sabría decirte cómo hacerlo, ¿tienes el enlace a tu repositorio para clonar el proyecto y probar cosillas? Lo más probable es que tengas que ponerles un
min-height: 100%
overflow: hidden
Aun así me gustaría hacer pruebas, ¿tienes el enlace a tu repositorio? 🤔