I have written below html to show 7 images below is the html
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<img src="img_avatar.png" alt="Avatar" style="width:200px">
</body>
</html>
This images comes looks like below
but want this image in circular format so one image is in center and all other images surround it like circle so tried adding below css
.Circle {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
which created circle but how to set image on nodes and center in this circle ?
CodePudding user response：
.container .row {
margin: 20px;
text-align: center;
}
.container .row img {
margin: 0 20px;
}<!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>
<link rel="stylesheet" href="./index.css">
</head>
<style>
img {
border-radius: 50%;
}
</style>
<body>
<div >
<div >
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
</div>
<div >
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
</div>
<div >
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
<img src="./images/img_avatar.jpeg" alt="" width="64" height="64">
</div>
</div>
</body>
</html>
CodePudding user response：
Knowing that this question is answered,i am posting another answer
:root{
--FullHeight:300px;/* [*] */
--CircleHeight:75px;/* [*] */
--totalImages:6;/* [*] */
}
img {
border-radius: 50%;
}
.circle-container {
position: relative;
width: var(--FullHeight);
height: var(--FullHeight);
border-radius: 50%;
padding: 0;
list-style: none;
border: solid 5px tomato;
}
.circle-container > * {
position: absolute;
top: 50%;
left: 50%;
margin: calc(0px - (var(--CircleHeight) / 2));
width: var(--CircleHeight);
height: var(--CircleHeight);
}
.circle-container > *:nth-of-type(1) {
--cur:1;/* [*] */
transform: rotate(calc((360deg / var(--totalImages)) * (var(--cur) - 1)))
translate(calc((var(--FullHeight) - var(--CircleHeight)) / 2))
rotate(calc((0deg - (360deg / var(--totalImages)) * (var(--cur) - 1))));
}
.circle-container > *:nth-of-type(2) {
--cur:2;/* [*] */
transform: rotate(calc((360deg / var(--totalImages)) * (var(--cur) - 1)))
translate(calc((var(--FullHeight) - var(--CircleHeight)) / 2))
rotate(calc((0deg - (360deg / var(--totalImages)) * (var(--cur) - 1))));
}
.circle-container > *:nth-of-type(3) {
--cur:3;/* [*] */
transform: rotate(calc((360deg / var(--totalImages)) * (var(--cur) - 1)))
translate(calc((var(--FullHeight) - var(--CircleHeight)) / 2))
rotate(calc((0deg - (360deg / var(--totalImages)) * (var(--cur) - 1))));
}
.circle-container > *:nth-of-type(4) {
--cur:4;/* [*] */
transform: rotate(calc((360deg / var(--totalImages)) * (var(--cur) - 1)))
translate(calc((var(--FullHeight) - var(--CircleHeight)) / 2))
rotate(calc((0deg - (360deg / var(--totalImages)) * (var(--cur) - 1))));
}
.circle-container > *:nth-of-type(5) {
--cur:5;/* [*] */
transform: rotate(calc((360deg / var(--totalImages)) * (var(--cur) - 1)))
translate(calc((var(--FullHeight) - var(--CircleHeight)) / 2))
rotate(calc((0deg - (360deg / var(--totalImages)) * (var(--cur) - 1))));
}
.circle-container > *:nth-of-type(6) {
--cur:6;/* [*] */
transform: rotate(calc((360deg / var(--totalImages)) * (var(--cur) - 1)))
translate(calc((var(--FullHeight) - var(--CircleHeight)) / 2))
rotate(calc((0deg - (360deg / var(--totalImages)) * (var(--cur) - 1))));
}/* [Duplicate this further more] */
.circle-container > *:nth-last-child {
transform: rotate(0deg) translate(0px) rotate(0deg);
}
.circle-container img {
max-width: 100%;
}<h2>Rounded Images</h2>
<ul class='circle-container'>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
<li><img src='https://static.vecteezy.com/system/resources/previews/000/631/816/original/vector-blue-square-grid-mosaic-background-creative-design-templates.jpg'></li>
</ul>here commented lines like /* [*] */ means you have to edit
Features
- Fully variablized
- Aligned in circle properly
A pen
CodePudding user response：
u must using grid or flex to create ur idea