Solution for responsive images covering entire container and keeping aspect ratio

This solution is probably already out there somewhere on the interwebs, but I write it down for now.

I’ve been working with a Bootstrap 4 based website a lot lately.
Today I got the requirement to make an background image adjust to the height of its sibling column but at the same cover the entire background of its container.

I want the entire container box to be covered by the background image and still keeping its aspect ratio in various screen sizes, it’s ok with clipping and stretching (if image is to small). Here is a solution:

html:

css:

 

 

Chrome DevTools – Save updated js, html and css files to disk from Chrome

Set up persistent authoring in Chrome DevTools so you can both see your changes immediatedly and save those changes to disk.

Source: Set Up Persistence with DevTools Workspaces | Web Tools – Google Developers