wrap image into div yet maintain aspect ratio

Question

the image flow out the div, I expect it fit within the wrap because I've set width to the div wrapper. The image maybe not the same size for all, so I didn't set the img to a certain fix width to maintain it aspect ratio.

demo link

profile-pic-wrap {
    width:200px;
    height:200px;
    border: 5px solid black;
}
img {
    width:100%;
}

Answer 1

You left the . out of your class. But event with that ( http://fiddle.jshell.net/293mW/1/ ) the image will pop out of the div. You could add overflow:hidden; to the div, but that will crop the image ( http://fiddle.jshell.net/pzDVd/ ).

You probably want to use a background image instead and the background-size: cover; or background-size: contain; rule. See also https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

jsFiddle example (or http://fiddle.jshell.net/Fhnk8/ )

.profile-pic-wrap {
    width:200px;
    height:200px;
    border: 5px solid black;
    background-image: url(http://naijaparrot.com/wp-content/uploads/2013/10/mark-zuckerberg-le-fondateur-de-facebook.jpg);
    background-size: cover;
}

Answer 2

Here is the correct code to solve your problem. This will resize any image into the container while maintaing the correct aspect ration.

Also, you should try to avoid background-size: cover because browser support is poor for older browsers.

http://fiddle.jshell.net/293mW/4/

.profile-pic-wrap {
    width:200px;
    height:200px;
    border: 5px solid black;
}
img {
    width:100%;
    max-width: 100%
    height: auto;
}