时间戳

首页 > 解决方案 > How to build a responsive CSS grid with square items to display images with multiple aspect ratios

html - How to build a responsive CSS grid with square items to display images with multiple aspect ratios

问题描述

I'm trying to build this responsive grid for an image gallery.

I want the grid items to be square-shaped at all times (aspect ratio 1:1), even though the pictures are coming in all sorts of aspect-ratios.

I'll probably display any picture inside the square items, using object-fit: cover.

I'm trying to get a solution that works well across browsers. Nothing too hacky. It's seems like a simple task but so far I couldn't wrap my head around it.

See an example on the code snippet that I've made.

Note: Every image needs to have an icon on top of it, just like the example.

.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>

标签： htmlcsscss-grid

解决方案

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

现在制作图像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>

推荐阅读