title: Create Centered Circles from Rectangles Images using Bootstrap
body: <p>I have images being passed dynamically to the UI and they can sent as any size size. I then need to scale them to specific sizes depending on which img tag that image is going to be displayed in. These images need to be circles of a statically set size, but not ovals and when they are cropped I want the circle to come from the center of my image.</p>
  
  <p>I have created a circular image using boostrap's img-circle:</p>
  
  <pre><code>&lt;img class="img-circle" src="image.jpg" width="117px" height="117px"/&gt;
  </code></pre>
  
  <p>I have many of similar images of various sizes being layed out using:</p>
  
  <pre><code>&lt;div class="row" style="margin: -40px 10px 30px"&gt;
  </code></pre>
  
  <p>This is working, except my images are ending up stretched to fit the circle rather than just cropping from it. Is there any simple way I can cause them to crop vs stretch?</p>
  
  <p>I'm hoping I can do this just using my img tag, as using something with "background-image" seems to mess up my layout.</p>
  
  <p>Added a fiddle:
  <a href="http://jsfiddle.net/jgt1qy7y/1/" rel="nofollow">http://jsfiddle.net/jgt1qy7y/1/</a></p>