Stack Overflow en español Asked by David Paucar on February 1, 2021
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>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>Answered by Daniel Abril on February 1, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP