How to upscale image to always cover div while keeping its aspect ratio?

Question

I would like my inline images to behave like background-size: cover; While using the new property object-fit: cover, which does a great job, I would like to provide a fallback.

I have created the basic setup for this fallback below. The only problem is, that I need jQuery/Javascript to choose weather the image needs to be either: width: 100%; height: auto; or height: 100%; width: auto;. How can I do this?

$('div').each(function() {
  var div = $(this);
  var image = div.find('img');
  
  // if image does not cover the div, change its css to { height: 100%; width: auto;}
});

div {
  width: 400px;
  height: 200px;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  background: lightblue;
}
img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Both divs should be covered by their images, while keeping the aspect ratio:

<div>
  <img src="http://placehold.it/600x100">
</div>
<div>
  <img src="http://placehold.it/100x600">
</div>