Using object-fit to scale animate images.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <a href="#">
      <img src="http://lorempixel.com/image_output/food-q-c-300-300-8.jpg">
    </a>
  </body>

</html>

/* Styles go here */

a {
  display: block;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid black; /* just to check the <a> dimensions. */
  text-align: center;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

img {
  transition: all 0.5s ease-in-out;
}

a:hover img {
  transform: scale(1.3);
}

On Chrome, this can be used to easily scale / crop images maintaining the aspect ratio, whatever the original file orientation, without using Javascript.

*Object-fit* has an interesting [browser support](http://caniuse.com/#feat=object-fit), with the expected exception of Internet Explorer and Edge (quite surprisingly...).

However, on Firefox there's an ugly issue: during the transition animation, the image actually loses its ratio, performs the animation and renders it again correctly.

Also, Safari doesn't use *object-position* (but defaults to the center, which is the most usable case).

For IE / Edge, a fallback trick has to be used. Using javascript, collect the _'src'_ attribute of the image and build an inline style with a 'background-image=...' and 'background-size: cover' to simulate the behaviour.