title: Bootstrap 3: Using img-circle, how to get circle from non-square image?
body: <p>I have <strong>rectangular</strong>, <strong>not necessarily square</strong> images.  </p>
  
  <p><a href="http://getbootstrap.com/css/#images-shapes">Using Bootstrap's <code>img-circle</code></a>, I'd like to get <strong>circular</strong> crops, <strong>not elliptical/non-circular</strong> crops of these rectangular images.</p>
  
  <p>How can this be accomplished? The crops should behave in an <a href="http://getbootstrap.com/css/#images-responsive"><code>img-responsive</code></a> manner and should be centered.</p>
  
  <p><a href="http://jsfiddle.net/Abdull/wDZF4/">JSFiddle to illustrate the non-circular behavior of non-square <code>img-circle</code> images</a>.</p>
  
  <pre><code>&lt;div class="container-fluid text-center"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;img-circle test&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img class="img-responsive" src="http://placekitten.com/g/200/200" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img class="img-responsive" src="http://placekitten.com/g/200/400" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img class="img-responsive" src="http://placekitten.com/g/400/200" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>