title: CSS: How to automatically resize a circular image as a window resizes?
body: <p>I'm using this CSS to create a circular image 220px wide, centered within its container (a 3-column span of an 1180px grid):</p>
  
  <pre><code>.circular-image {
    display: block;
    margin: 0 auto;
  
    width: 220px;
    height: 220px;
    border-radius: 110px;
    -webkit-border-radius: 110px;
    background: url(images/some-image.png);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  }
  </code></pre>
  
  <p>And I know that you can cause images to automatically rescale using:</p>
  
  <pre><code>img {
    height: auto;
  }
  </code></pre>
  
  <p>How do I do this for circular images?  </p>