Create Centered Circles from Rectangles Images using Bootstrap

Question

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.

I have created a circular image using boostrap's img-circle:

<img class="img-circle" src="image.jpg" width="117px" height="117px"/>

I have many of similar images of various sizes being layed out using:

<div class="row" style="margin: -40px 10px 30px">

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?

I'm hoping I can do this just using my img tag, as using something with "background-image" seems to mess up my layout.

Added a fiddle: http://jsfiddle.net/jgt1qy7y/1/

Answer 1

You should enclose your image in a parent div.

The only thing .img-circle does is apply border-radius: 50%; It will inherit the width and the height of the chosen element. If those are not equal it will be an oval. In that case you will have to define sizes but then the images will get distorted. So that's why you need a parent div. To set the width and the height, and not distort the image.

.img-circle {
    border-radius: 50%;
    position: relative;
    height: 117px;
    width: 117px;
    overflow: hidden;
   
    float: left;
    margin-right: 10px;
}

.img-circle.hor img {
    position: absolute;
    left: 50%;
    width: auto;
    height: 117px;
    transform: translateX(-50%);
 }

.img-circle.vert img {
    position: absolute;
    top: 50%;
    width: 117px;
    height: auto;
    transform: translateY(-50%);
}

    <div class="img-circle hor">
        <img src="http://placehold.it/350x150" />
    </div>

    <div class="img-circle vert">
        <img src="http://placehold.it/150x350" />
    </div>