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

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