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

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