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:

<div class="row">
	<div class="col-6">
		<div class="teaser-container" id="teaser1">
			...column 1 html content...
		</div>
	</div>		
	<div class="col-6">
		<div class="teaser-container" id="teaser2">
			...column 2 other various height html content...
		</div>
	</div>			
</div>

css:

#teaser1
{ 
	height: 100%; 
	background-image: url('/globalassets/top-image.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

 

 

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