utilice diferentes tipos de fotos, pero algunas se recortan. ¿como podría ajustarla para que todas queden del mismo tamaño?

Luis Alejandro Ortega Bermudez

Luis Alejandro Ortega Bermudez

Pregunta
studenthace 4 años

utilice diferentes tipos de fotos, pero algunas se recortan. ¿como podría ajustarla para que todas queden del mismo tamaño?

5 respuestas
para escribir tu comentario
    Luis Alejandro Ortega Bermudez

    Luis Alejandro Ortega Bermudez

    studenthace 4 años

    uff muchas gracias !!! esto me va ayudar bastante.

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacherhace 4 años

    PD. Agrega un espacio entre ".post-image" y "img", por alguna razón Platzi le quita los espacios

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacherhace 4 años

    Vale, te compartiré dos formas que encontré para hacerlo:

    Primera forma

    1. Limitamos el height de cada fila de la grid, en este caso le puse 200px, tú puedes limitarlo al tamaño que quieras:
    .post-list { display: grid; grid-template-columns: repeat(3, minmax(100px , 293px)); justify-content: center; gap: 3px; grid-auto-rows: 200px; }
    1. 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)
    .post-image { height: 100%; }
    1. 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;
    .post-image img{ width: 100%; height: 100%; object-fit: cover; vertical-align: top; }

    En mi caso queda así:

    ig-responsive.png

    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

    1. Limitamos el height de cada fila de la grid, en este caso le puse 200px, tú puedes limitarlo al tamaño que quieras:
    .post-list { display: grid; grid-template-columns: repeat(3, minmax(100px , 293px)); justify-content: center; gap: 3px; grid-auto-rows: 200px; }
    1. Agregamos un
      overflow: hidden;
      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.
    .post { position: relative; cursor: pointer; display: block; overflow: hidden; }
    1. 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:
    .post-image { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; }
    1. 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%:
    .post-image img{ width: 200%; vertical-align: top; }

    A mí me queda así:

    ig-2.png

    Ya es cuestión de que juegues con los valores ^^

    Luis Alejandro Ortega Bermudez

    Luis Alejandro Ortega Bermudez

    studenthace 4 años

    @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

    Carlos Eduardo Gomez García

    teacherhace 4 años

    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%
    a todas las imágenes, dejar un alto definido a cada row de la grid y ponerles un
    overflow: hidden
    a cada celda de la grid, eso estiraría las imágenes hasta que todas ocupen el mismo tamaño (en altura), pero en anchura se saldrían, por lo que el overflow hidden las recortaría haciendo que todas queden cuadradas, proporcionales y del mismo tamaño.

    Aun así me gustaría hacer pruebas, ¿tienes el enlace a tu repositorio? 🤔

Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.

Curso de CSS Grid Layout 2017
Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.