Question

我正在尝试为图片库构建此响应式网格。

我希望网格项目始终都是正方形的（纵横比为1：1），即使图片采用各种纵横比。

我可能会使用object-fit: cover在正方形项目内显示任何图片。

我正在尝试找到一种在所有浏览器上都能正常运行的解决方案。没什么 hacky 。这似乎是一个简单的任务，但到目前为止，我仍无法解决这个问题。

请参阅我制作的代码段示例。

注意：每张图片都需要在其顶部带有一个图标，就像示例一样。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.gridItemContainer {
  position: relative;
}


.grid img {
  display: block;
  object-fit: cover;
  width: 100%;
}

.grid i {
  font-size: 120%;
  position: absolute;
  top: 10px;
  left: 10px;
}

<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="grid"/>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41g1xjf4CpL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/4106U8dHTgL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41cSJCJ%2BSaL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41DpkMbHZZL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41i-GWf875L.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/51LUVEJQbjL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
</div>

Answer 1

您可以使用padding-top: 100%来设置网格项的height -这将构成一个正方形，因为padding的百分比基于CSS中的宽度

现在制作图像position: absolute，以便将其从流程中删除，并且height将完全由网格项上设置的padding-top决定 （gridItemContainer）-参见下面的演示：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.gridItemContainer {
  position: relative;
  padding-top: 100%; /* added */
  border: 1px solid;
  background: cadetblue;
}


.grid img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* image fills the grid item */
  position: absolute; /* position absolutely */
  top: 0;
  left: 0;
}

.grid i {
  font-size: 120%;
  position: absolute;
  top: 10px;
  left: 10px;
}

<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="grid"/>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41g1xjf4CpL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/4106U8dHTgL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41cSJCJ%2BSaL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41DpkMbHZZL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41i-GWf875L.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/51LUVEJQbjL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
</div>

如何使用方形项目构建响应式CSS网格以显示具有多个长宽比的图像

1 个答案: