CSS resize an image and keep the native ratio - html

Question

What i'm trying to do here, is to crop an image to replace white spaces of my div:
<div id="profilepicture" style='background:url()'>
<img src="utilisateurs/pp/<?php echo $userinfo['photoP']; ?>">
</div>
And here the stylesheet related to this:
#profilepicture{
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
display: flex;
}
#profilepicture img{
width: 100%;
height: auto;
margin: auto;
}
Here is what it gives me :
I just want to crop left and right of the photo and zoom at the center to not have white spaces anymore !
Edit:
If i do
width: auto;
height: 100%;
it gives me this :
Now i just want it to be centered!
Any ideas ?

Answer 1

Using Clip
Use the clip property.
img {
position: absolute;
clip: rect(0, 100px, 100px, 0);
}
One thing to note. clip only works on something position: absolute or position: fixed. I don't know why. This limits its usefulness, but can be dealt with without too much trouble.
The second thing to note is about rect(). Its syntax (like many others in CSS) is rect(top, right, bottom, left);. Now pay attention here because it can be tricky. Both the top and the bottom values define the offset from the top border and the left and right values define the offset from the left border.
So clip: rect(40px, 260px, 150px, 80px); does the following.
Using Background-Image
Probably the easiest option in terms of assembly.
<div id="profilepicture" style='background-image:url('utilisateurs/pp/<?php echo $userinfo['photoP']; ?>')'>
</div>
div {
background-position: center;
}
This, more or less, does what you want, though it does have the side effect of using inline styles.

Answer 2

I suggest a background with "cover" property by moving the image to the background.
html:
<div id="profilepicture" style='background-image:url(utilisateurs/pp/<?php echo $userinfo['photoP']; ?>)'>
</div>
css:
#profilepicture{
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
display: flex;
background-size:cover;
background-position:center;
}

Answer 3

Here is one way of doing it.
Set overflow: hidden on the parent container that contains the image.
You can then use absolute positioning to placed the left edge of the image to the center, and then use translateX to shift it to the left by 50% to center the image.
The net effect if to hide/crop the left and right edges of the image by hiding them (hide the overflow) in the parent container.
#profilepicture {
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
overflow: hidden;
position: relative;
}
#profilepicture img {
width: auto;
height: 100%;
margin: auto;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
<div id="profilepicture">
<img src="http://placehold.it/400x300">
</div>

Answer 4

Center it, add a negative margin and hide the overflow:
#profilepicture{
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
display: flex;
text-align:center;
overflow:hidden;
}
#profilepicture img{
width: auto;
height: 100%;
margin: 0 -50%;
}
<div id="profilepicture">
<img src="http://lorempixel.com/400/200/">
</div>
Here's what it looks like without the container:
<img src="http://lorempixel.com/400/200/">

Answer 5

OK, I hear you. I have just something very similar to this. There are a few ways to achieve this.
Use the not so well supported CSS property of object-fit - it does exactly what you want but you will need to use a poyfill if you want to support most browsers.
Set your image wrapper div to overflow:hidden as explained in this guide The guide is for circular images, so just omit the border-radius parts.
If you prefer to see an example I have done one for both options. First option is the one that is commented out and the second option is the active one: http://codepen.io/cactusa/pen/qZrobK

Answer 6

Reduce the height of the container (#profilepicture) because you have a square container with equal height and width but the img is a rectangle and doesn't have same height and width increasing the height of the img to 100% will cause distortion and look funny.