Create Centered Circles from Rectangles Images using Bootstrap - html

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>

Answer 2

Right, as far as I can answer from the information you've provided, you're setting the image tag to have 117px in both height and width. This is the IMG tag you're changing, and so every image will be stretched TO that specification.
So, you have two options:
1) You can either set a specific width or height and allow the circle to be auto width or height, e.g
.img-circle{
width:auto;
height:auto;
width:117px;
max-height:117px;
}
On this I have set a max height of 117px so that HUGE long ones don't go overboard, but this will make them tiny in the circle http://jsfiddle.net/jgt1qy7y/8/
Or, secondly, you could create a DIV with fixed width 117px by 117px (I'm assuming you're using this as profile pictures or something?), then dynamically modify the style of the DIV to add a background image then configure that in your CSS:
.img-circle{
width:117px;
height:117px;
}
For your div. Then, you can dynamically output the URL of the image into your STYLE of the div
<div class="img-circle" style="background-image:url('echo your url here');"></div>
You can then style the background image by adding CSS to your .img-circle:
.img-circle{
background-size:contain/cover;
background-repeat:no-repeat;
backgrund-position:50% 50%;
}
You'll have to check out cropping an image in javascript if you want the image to fit exactly how you want it, but you get the jist.
Disclaimer: I've never properly learned CSS from websites, I've picked it up as I've gone along... Sorry if this is written badly!