1

Tengo mi siguiente código, que el minmax en los rows implícitos debería aplicarse los 100px cuando se esté reduciendo y los 293px cuando esté totalmente apliado, pero cuando los reduzco no surte efecto los 100px y la imagen en lugar de resultar ser un cuadrado, resulta estirarse y el objetivo que deseo es que sea un cuadrado como cuando se visualiza en desktop, estoy utilizando CSS Grid Layout.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}

.post-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 293px));
    grid-auto-rows: minmax(100px, 293px);
    justify-content: center;
    gap: 28px;
}

.post {
    cursor: pointer;
    position: relative;
    display: block;
}

.post-image {
    margin: 0;
    height: 100%;
}

.post-image img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.post-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.post:hover .post-overlay {
    display: flex;
}

.post-likes,
.post-comments {
    display: inline-block;
    width: 80px;
    margin: 5px;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .post-list {
        gap: 3px;
    }
}
<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
              content="ie=edge">
        <title>Instagram</title>
        <link rel="stylesheet"
              href="style.css">
    </head>
    <body>
        
        <section class="post-list">
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
        </section>
    
    </body>
</html>

1 respuesta 1

1
+50

estás trabajando con valores min y max para cada dimensión sin relación entre ellas, por lo que en desktop toma para ambas el máximo y por eso se ve cuadrada. Pero cuando reducimos el ancho de la ventana, al forzar siempre 3 columnas, se reduce el ancho de éstas hasta el mínimo indicado de 100px, mientras que la altura, que no está restringida, sigue tomando el máximo, de ahí que se pierda la proporción cuadrada.

Lo que necesitas es conservar el aspect-ratio. Para eso hay dos formas, o tu imagen es cuadrada, y por su naturaleza conservará el aspect ratio, por lo que no necesitarías object-fit; o tienes que usar un método que no tiene nada que ver con grid y eliminar el control que hace éste del alto de las columnas con grid-auto-rows.

La solución pasa por hacer que el elemento que contiene la imagen (el <figure>) tenga un padding-top: 100%, ya que el padding-top porcentual se referencia del ancho del elemento. Algo que no mucha gente sabe. Seguidamente hacemos que la imagen se posicione en absoluto en top: 0 y al <figure> le aplicamos position: relative;

Te dejo aquí la solución:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}

.post-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 293px));
    /*grid-auto-rows: minmax(100px, 293px);*/
    justify-content: center;
    gap: 28px;
}

.post {
    cursor: pointer;
    position: relative;
    display: block;
}

.post-image {
    position: relative;
    margin: 0;
    /*height: 100%;*/
    width: 100%;
    padding-top: 100%;
}

.post-image img {
    position: absolute;
    top: 0;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.post-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.post:hover .post-overlay {
    display: flex;
}

.post-likes,
.post-comments {
    display: inline-block;
    width: 80px;
    margin: 5px;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .post-list {
        gap: 3px;
    }
}
<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
              content="ie=edge">
        <title>Instagram</title>
        <link rel="stylesheet"
              href="style.css">
    </head>
    <body>
        
        <section class="post-list">
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
            <a href=""
               class="post">
                <figure class="post-image">
                    <img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
                         alt="">
                </figure>
                <span class="post-overlay">
                    <p>
                        <span class="post-likes">150</span>
                        <span class="post-comments">10</span>
                    </p>
                </span>
            </a>
        </section>
    
    </body>
</html>

2
  • Muchas gracias compa, sin duda tu solución es correcta pero para mejor funcionamiento creo que debo usar imágenes cuadradas para evitar tanto lio, muchas gracias crack. Commented el 18 ene. 2021 a las 2:14
  • Siempre feliz de ayudar ;) Commented el 18 ene. 2021 a las 9:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.