Centering image inside a div using CSS instead of jquery

Question

I\'m trying to fit any sized image inside a (always) square div, and retain the aspect when the size of the parent div changes. Here\'s what I\'m doing:

CSS:

<

Answer 1

You could do something like this:

http://jsfiddle.net/vL95x81o/5/

    

    




    

    


.photo_container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-style: solid;
    border-color: green;
    float:left;
    margin-right:10px;
    position: relative;
}

.photo {
    height: 100%;
    width: 100%;
}

.photo--1 {
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg') no-repeat center center;
    background-size: cover;
}

.photo--2 {
      background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg') no-repeat center center;
    background-size: cover;
}

I have changed the imgs to divs with background images and used background position cover with the image being centered.