Center image inside div using CSS instead of jquery

Question

I am trying to fit an image of any size inside a (always) square div and preserve the aspect when resizing the parent div. That's what I'm doing:

CSS

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

.photo_container a img{
    position:absolute;
}

HTML

<!--p>Photo height>width </p-->
<div class="photo_container">
    <a href="#">
        <img class="photo"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg" 
style="width:100%; height:auto;">
        </img>
    </a>
</div>

<!--p>Photo width>height </p-->
<div class="photo_container">
    <a href="#">
        <img class="photo"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg" 
style="width:auto; height:100%;left=-100px">
        </img>
    </a>
</div>

JavaScript:

// fix image size on load
$(".photo").one("load", function() {
  fixImage($(this));
}).each(function() {
  if(this.complete) $(this).load();
});

// Just to test if everything working fine
$(".photo").on("click",function(){
   var rand = Math.floor(Math.random() * 200) + 80;  
    $(this).parent().parent().width(rand);
    $(this).parent().parent().height(rand);   
   fixImage($(this));
});

// Brings the photo dead center
function fixImage(obj){
        //alert("something changed");
        var pw = obj.parent().parent().width(); 
        var ph = obj.parent().parent().height();         
        var w = obj.width();
        var h = obj.height();
        console.log(w+"   "+pw);
        if(h>w){
            var top = (h-ph)/2;
            obj.css("top",top*-1);
        }else{
            var left = (w-pw)/2;
            obj.css("left",left*-1);            
        }

}

Working example: http://jsfiddle.net/vL95x81o/4

How can this be done without using jquery, but only for CSS? If the div size never changes, this solution is fine. But I look at responsive designs and it seems that the size of the div photo_containermay need to be changed (via CSS) depending on the size of the screen.

Here are the photos before cropping:

Answer 1

, , , , :

CSS

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

.photo_container img {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

HTML:

<div class="photo_container">
    <a href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg" />
    </a>
</div>

<div class="photo_container">
    <a href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg" />
    </a>
</div>

100- 100% , , .

, IE8 Opera Mini - http://caniuse.com/#feat=transforms2d

Answer 2

- :

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

<!--p>Photo height>width </p-->
<div class="photo_container">
    <div class="photo photo--1">
    </div>
</div>

<!--p>Photo width>height </p-->
<div class="photo_container">
    <div class="photo photo--2">
    </div>
</div>

.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;
}

imgs divs .

Answer 3

.

.photo_container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-style: solid;
    border-color: green;
    float:left;
    margin-right:10px;
    position: relative;
}
.photo_container a{
   
  /* Set the background size to cover to scale the image */
  background-size: cover;

  /* Position the image in the center */
  background-position: 50% 50%;

  background-repeat: no-repeat;

    position:absolute;
  width: 100%;
  height: 100%;
}

<!--p>Photo height>width </p-->
<div class="photo_container">
    <a href="#"  style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg);">
    </a>
</div>

<!--p>Photo width>height </p-->
<div class="photo_container" >
    <a href="#" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg);">
    </a>
</div>

Answer 4

I solved this without using background images or JS. The height comes from the before tag in the container. 100% filling is equal to 100% of the width. Thus, the height always has the same width.

http://jsfiddle.net/a1rLeq06/

 <!--p>Photo height>width </p-->
<div class="photo_container">
    <a href="#">
        <img class="photo"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg" 
style="width:100%; height:auto;">
        </img>
    </a>
</div>

<!--p>Photo width>height </p-->
<div class="photo_container">
    <a href="#">
        <img class="photo"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg" 
style="width:auto; height:100%;left=-100px">
        </img>
    </a>
</div>

css:

.photo_container {
    width: 20%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin: 10px 0;
}

.photo_container:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.photo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}