<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="circle"> <img class="circle-fill" src="https://www.indior.tours/images/JSL%20Sam%20Dunes%20Rajasthan%20India%20Indior%20Tours.webp" alt="Tyler"> </div> </div>

.circle { background: rgba(15, 28, 63, 0.125); border-radius: 50%; display: block; height: 0; overflow: hidden; padding-top: 100%; position: relative; width: 100%; } .circle::after { border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15, 28, 63, 0.25); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .circle-fill { height: auto; left: 0; position: absolute; top: 0; width: 100%; } @supports (object-fit: cover) { .circle-fill { height: 100%; object-fit: cover; } } /** * Constrain dimensions for demo */ .container { max-width: 66vmin; width: 66%; }