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

The background solution that others have posted was my initial thought, but if you want to still use images then you could do the following:

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>

This will make any image inside to be either 100% high or 100% wide, depending on the shortest attribute, and centralise them horizontally and vertically.

Edit

It's worth noting that transform is not supported in IE8 or Opera Mini - http://caniuse.com/#feat=transforms2d

Answer 2

I solved this without using background-images or JS. The height comes from the before tag in the container. The 100% of the padding equals 100% of the widht. So the height has always the same width.

http://jsfiddle.net/a1rLeq06/

 <!--p>Photo's 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's 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>

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

Answer 3

You could do something like this:

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

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

<!--p>Photo's 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;
}

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

Answer 4

Use background images.

.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's 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's 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>