Responsive-images and Semantic HTML - css

Question

I often use the ‘background-image” css property to achieve nicely behaving responsive images. I add the following CSS:
background-size: cover;
background-position: center center;
Which yields a centered image which takes the whole space of the containing div/element.
I use it for images which are a part of the content. The problem is it is probably incorrect semantically, as background-images should be set for decoration not content. I consider using either of the following methods to solve this issue:
Find a method to make the a background-image more semantically appropriate. Perhaps holding it in a figure html tag instead of a div. Perhaps using the title property as a replacement for the alt property of the image element.
Provide the advantages a background-image has to the ordinary img tag. Is there a way for an image element to cover the containing div and also to center in the middle of that containing div?

Answer 1

Say hello to the css property object-fit (css-tricks). The behavior is kinda the same as background-size, you got kinda the same options. Although the support for it is not great for IE and only partial in Edge (caniuse).
There are polyfills for it. They are different though
calulates the position with javascript (found here)
puts the image as a background-image (found here) (note there are several polyfills that does this)
I rolled my own for a project (it's more complete then the example below), but it's the same approach as in option two. I'm not sure about the support for media object on that one though as I haven't had the need for it.
if you prefer jsfiddle
if ("objectFit" in document.documentElement.style === false) {
$(".block__image").each(function() {
var $image = $(this);
if ($image === undefined) {
return;
}
$image
.parents(".block")
.css("background-image", "url(" + $image.attr("src") + ")")
.addClass("block--object-fit");
});
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
padding: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block {
height: 25rem;
width: 30%;
background-color: deepskyblue;
overflow: hidden;
position: relative;
-webkit-transition: height 200ms;
transition: height 200ms;
}
#media screen and (min-width: 1000px) {
.block {
height: 35rem;
}
}
.block.block--object-fit {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.block__image {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.block--object-fit .block__image {
opacity: 0;
}
.block__image-alternative {
max-height: 100%;
max-width: auto;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<img src="https://source.unsplash.com/cXU6tNxhub0/1600x900" alt="" class="block__image">
</div>