Question 192835 in Html Question posted in
Some basic documentation can be found here.

How to use HTML/CSS to group images into a grid with circular crop

I have four images, I want them to form a collage like the image below: all four arranged into a 2×2 grid, and the grid itself cropped to a cricle.

What is the HTML/CSS needed to achieve this effect, as in the image below?

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

enter image description here

Tags:

2

Answers


  1. 0

    Sets the display to a grid layout with two columns (grid-template-columns: repeat(2, 1fr)). You can adjust the width and height of the .collage element as per your desired size and if you need some space between images then use for a gap between the images (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>

    The .collage class also has a border-radius property set to 50% to create the circular shape. The overflow property is set to hidden to hide any overflow from the circular cropping.

    The .collage img selector sets the images to fill their respective grid cells using object-fit: cover. They will maintain their aspect ratio while covering the entire available space in each grid cell.

    Make sure to replace the src attribute of each element with the correct image source URLs.

    By applying this HTML and CSS code, the four images will be arranged in a 2×2 grid, and the grid itself will be cropped into a circle.

    Login or Signup to reply.
  2. 0

    Solution requires 3 steps:

    • Get your images the same size
    • Arrange them in a 2×2 grid
    • Clip the border of that grid to a circle.

    You can achieve each with a <div> and CSS to match:

    Complete example in the fiddle here:
    https://jsfiddle.net/kop34gac/

    With this result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search