How to responsive create circle div with center image/text

Question

I am trying to create responsive circle which fit on every screen size like this:

I tried some codes from but anyone not work properly according to requirement.

Answer 1

Try something like this:

    <div class="container">
      <div class="circle">
          <img class="image" src="http://lorempixel.com/800/800/">
      </div>
    </div>

    .container {
      width: 100%;
      background: #000;
    }

    .circle {
      border-radius: 50%;
      width: 100%;
      padding-bottom: 100%;
      background: #fff;
      position:relative;
      overflow:hidden;
      z-index:2;
    }
    .image {
      z-index:1;
      position:absolute;
      top:0;
      left:0;
      width:auto;
      max-width:100%;
      height:auto;
      max-height:100%;
    }

The circle should fit the container..

see on fiddle: http://jsfiddle.net/jimmynewbs/doan8b2f/

You can then create a div inside this for the text / image and set the image to a maximum width of 100% and width auto. this will make sure it doesn't get bigger than the circle. Positioning the image absolute can help keep it within the circle too if you wanted to make it expand out to the edges...

Answer 2

You should do it with SVG or 2x res PNG. It will be approximately the same size regarding bandwith but you'll get a better control and much faster render.