<p>  
  Note: this method is no longer necessary for simulating css background cover effect.
</p>
<p>
  You can now use the <code>object-fit</code> css property, that is <a href="https://caniuse.com/#feat=object-fit">widely supported by browsers</a>.<br>
  <small>(Yes, even Opera Mini...!).</small>
</p>


<div id="test">
  <img src="https://secure.gravatar.com/avatar/e89584fc717a92922689cb33ab29dd93?s=160&d=https%3A%2F%2Fcss-tricks.com%2Fimages%2Fget-gravatar.png&r=PG" class="center" />
</div>

@-webkit-keyframes hammer {
    0% { height: 100px; width: 100px; }
   33% { height: 100px; width: 300px; }
   66% { height: 350px; width: 300px; }
  100% { height: 100px; width: 100px; }
}
@keyframes hammer {
    0% { height: 100px; width: 100px; }
   33% { height: 100px; width: 300px; }
   66% { height: 350px; width: 300px; }
  100% { height: 100px; width: 100px; }
}
#test{
  -webkit-animation: hammer 10s ease infinite;
          animation: hammer 10s ease infinite;
  width: 700px;
  height: 100px;
  background: red;
  position: relative;
  overflow: hidden;
}

.center{
  position: relative;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  
/*
  if you want an effect similar to 
  background-position: cover;
  (doesn't work below image dimensions)
*/
  min-width:100%;
  min-height:100%;