html/css - displaying content images as background-image - html

Question

I am currently developing a CMS and want to know which way is better for a rendering function of an image (in content):
When I want to crop an image my usual way was following:
Calculate and do the cropping in PHP and cache the cropped image. Then simply render it with an image element.
Now I think there could be a better way:
Simply render a div with e.g. the exact height (width maybe 100% or fixed) and set the image as background-image with background-size: cover; With background-position you can adjust the cropped area.
Because of the rule that you shouldn't display content images as background-image, I have made following measure:
I render the Image inside the div but it's fully transparent and there's an overflow: hidden; on the div. So you can e.g. save the image with right click.
For me the main reasons to use this are following:
It is fully repsonsive: You can always change Sizes and Aspect Ratio and background-size: cover; will always make it look nice (except if you use any bizarre format). So on desktop you can have a 200x200px box and on an other device you could change it to 200x100px without having any problems.
You use the same image for all devices. No caching of different crops (maybe just scale any image above web size down).
This could look like this:
.background-image {
background-image: url(https://placeimg.com/1000/500/nature);
background-size: cover;
background-position: center center;
overflow: hidden;
margin-bottom: 25px;
}
.background-image img {
opacity: 0;
}
.size-a {
width: 200px;
height: 100px;
}
.size-b {
width: 200px;
height: 200px;
}
.size-c {
width: 200px;
height: 800px;
}
.size-d {
width: 800px;
height: 200px;
}
<div class="background-image size-a">
<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-b">
<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-c">
<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-d">
<img src="https://placeimg.com/1000/500/nature">
</div>
HERE as an example
What do you think about this method? What are the benefits and what are the disadvantages? Do you have any other solution?

Answer 1

I vote for PHP way, once you crop it it's easy to place it but what's more important is download speed. With CSS you download whole image and than you just position and/or resize it.