如何使用HTML/CSS将图像分组到带有圆形裁剪的网格中

7uzetpgm 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(170)

我有四个图像，我希望他们形成一个拼贴像下面的图像：所有四个排列成2x2网格，并且网格本身被裁剪成 curl 。
需要什么HTML/CSS来实现这种效果，如下图所示？

<div>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
</div>

css

来源：https://stackoverflow.com/questions/76522523/how-to-use-html-css-to-group-images-into-a-grid-with-circular-crop

2条答案

按热度按时间

txu3uszq1#

将显示设置为具有两列的网格布局（grid-template-columns：重复（2，1fr））。你可以根据你想要的大小调整.collage元素的宽度和高度，如果你需要一些图像之间的空间，那么使用图像之间的间隙（grid-gap：10px）.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
    <style>
      .collage {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* grid-gap: 10px; */
        width: 400px; /* Adjust as needed */
        height: 400px; /* Adjust as needed */
        border:2px solid black;
        border-radius: 50%;
        overflow: hidden;
      }

      .collage img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="collage">
        <img src="" alt="Image 1" />
        <img src="" alt="Image 2" />
        <img src="" alt="Image 3" />
        <img src="" alt="Image 4" />
    </div>
  </body>
</html>

.collage类还有一个border-radius属性设置为50%以创建圆形形状。overflow属性设置为hidden以隐藏循环裁剪产生的任何溢出。
.collage img选择器使用对象拟合来设置图像以填充它们各自的网格单元格：它们将保持其纵横比，同时覆盖每个网格单元中的整个可用空间。
确保用正确的图像源URL替换每个元素的src属性。
通过应用此HTML和CSS代码，四个图像将排列在一个2x2的网格中，网格本身将被裁剪成一个圆圈。

赞(0）回复(0）举报 2023-06-25

8yparm6h2#

解决方案需要三个步骤：