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:

 

 

How do I wrap a selection with an HTML tag in Visual Studio? – Stack Overflow

A very usable keyboard shortcut when working with html in Visual Studio.

Visual Studio 2015 comes with a new shortcut, Shift+Alt+W wraps the current selection with a div. This shortcut leaves the text “div” selected, making it seamlessly changeable to any desired tag. This coupled with the automatic end tag replacement makes for a quick solution. UPDATE This shortcut is available in Visual Studio 2017 as well, but you must have the “ASP.NET and Web Development” workload installed. Example Shift+Alt+W > p > Enter

Source: How do I wrap a selection with an HTML tag in Visual Studio? – Stack Overflow