html - How do I create different size round images -

trying replicate effect using css/scss , far tried scss applying different width children object ,but nothing seem working

.box-container{     display: flex;     flex-wrap:wrap; }    .box-container .box1{     width: 30%; } 

three ways rounded images:

1- image border-radius: 50%;

2- container border-radius: 50%; , image background

3- container border-radius: 50%; , image inside

to add text use options #2 or #3 text inside 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 circles on container 0 space among them using display:flex or float:left, did place them 1 one using position:absolute inside position:relative container (not handy solution , have several limitations works in scenarios).

ps: notice fact i'm using padding-bottom instead of height keep 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>