How do I create different size round images - html

Question

trying to replicate this effect using css/scss , so far tried with scss by applying different width to the children object ,but nothing seem to be working
.box-container{
display: flex;
flex-wrap:wrap;
}
.box-container .box1{
width: 30%;
}

Answer 1

Three ways to do the rounded images:
1- an image with border-radius: 50%;
2- a container with border-radius: 50%; and an image as background
3- a container with border-radius: 50%; and an image inside
To add text just use options #2 or #3 with text inside the div.
body {
background: honeydew;
}
#stripe {
position: absolute;
bottom: 38%;
width: 100%;
color: #fff;
text-align: center;
cursor: default;
}
#pic {
width: 160px;
height: 160px;
border-radius: 50%;
border: 4px solid skyblue;
box-sizing: border-box;
vertical-align: top;
}
#imgcontainer {
width: 160px;
height: 160px;
position: relative;
vertical-align: bottom;
background-image: url(http://i.imgur.com/YwbFAEg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
display: inline-block;
border-radius: 50%;
border: 4px solid orange;
box-sizing: border-box;
}
#container {
width: 160px;
height: 160px;
position: relative;
vertical-align: bottom;
display: inline-block;
border-radius: 50%;
border: 4px solid crimson;
box-sizing: border-box;
overflow: hidden;
}
#pic2 {
position: absolute;
top: 0;
left: 0;
margin: auto;
height:100%;
width:100%;
}
<img id=pic src="http://i.imgur.com/YwbFAEg.jpg">
<div id=imgcontainer><p id=stripe>text</p></div>
<div id=container><img id=pic2 src="http://i.imgur.com/YwbFAEg.jpg"><p id=stripe>text</p></div>
I had no success distributing the circles on a container with zero space among them using display:flex or float:left, so I did place them one by one using position:absolute inside a position:relative container (not a handy solution and have several limitations but it does works in some scenarios).
ps: notice the fact I'm using padding-bottom instead of height to keep the circles' aspect ratio.
body {
width: 100%;
height: 100vh;
margin: 0;
background: honeydew;
}
#container {
width: 100%;
height: 100%;
min-height: 346px;
position: relative;
}
.imgcontainer {
background-image: url(http://i.imgur.com/YwbFAEg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
border: 4px solid orange;
box-sizing: border-box;
}
#a {
top: 0;
left: 0;
width: 30%;
padding-bottom: 30%;
}
#b {
top: 0;
left: 29%;
width: 16%;
padding-bottom: 16%;
}
#c {
top: 0;
left: 44.5%;
width: 23%;
padding-bottom: 23%;
}
#d {
top: 0;
left: 67%;
width: 33%;
padding-bottom: 33%;
}
#e {
top: 54%;
left: 0%;
width: 24%;
padding-bottom: 24%;
}
#f {
top: 32.5%;
left: 23%;
width: 33%;
padding-bottom: 33%;
}
#g {
top: 39.5%;
left: 55.5%;
width: 15.5%;
padding-bottom: 15.5%;
}
#h {
top: 57.9%;
left: 65.4%;
width: 23%;
padding-bottom: 23%;
}
<div id=container>
<div id=a class=imgcontainer></div>
<div id=b class=imgcontainer></div>
<div id=c class=imgcontainer></div>
<div id=d class=imgcontainer></div>
<div id=e class=imgcontainer></div>
<div id=f class=imgcontainer></div>
<div id=g class=imgcontainer></div>
<div id=h class=imgcontainer></div>
</div>