<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Any image, size doesn´t matter, centered and respecting ratio</h2> </div> <div class="row"> <div class="col-sm-2"> <p> Image in to circle</</p> <div class="ratio img-responsive img-circle" style="background-image: url(https://camo.githubusercontent.com/47dcfb965976b72705949abac49512c08f98b60e/687474703a2f2f696d672e736b697463682e636f6d2f32303132303730322d6b36636370376b6b6a6a686163663371693279357972683768712e676966);"></div> </div> <div class="col-sm-10"> <p> Real image</p> <img src="https://camo.githubusercontent.com/47dcfb965976b72705949abac49512c08f98b60e/687474703a2f2f696d672e736b697463682e636f6d2f32303132303730322d6b36636370376b6b6a6a686163663371693279357972683768712e676966"> </div> </div> </div>

.caption div { box-shadow: 0 0 5px #C8C8C8; transition: all 0.3s ease 0s; } .img-circle { border-radius: 50%; } .img-circle { border-radius: 0; } .ratio { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 0; padding-bottom: 100%; position: relative; width: 100%; } .img-circle { border-radius: 50%; } .img-responsive { display: block; height: auto; max-width: 100%; }