Object IE Fit

create example

Html

Scss

 
		
$banner-height: 58rem;
$banner-max-height: 95vh;
$banner-height--l: 50rem;
$banner-height--m: 45rem;
$banner-height--m: 45rem;

.banner {
	height: $banner-height;
	max-height: $banner-max-height;
	position: relative;

	&__image img {
		width: 100%;
		height: $banner-height;
		max-height: $banner-max-height;
		object-fit: cover;
	}

	&__headline {
		padding-right: 1rem;
		position: absolute;
		bottom: 1.4rem;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	[data-banner-image] {
		height: $banner-height;
		max-height: $banner-max-height;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
}

@include viewport-large {
	.banner {
		height: $banner-height--l;

		&__image img {
			height: $banner-height--l;
		}
	}
}

@include viewport-medium {

	.banner {
		height: $banner-height--m;

		&__image img {
			height: $banner-height--m;
		}

		&__headline {
			bottom: 4rem;
		}
	}
}

@include viewport-small {
	.banner {

		&__headline {
			bottom: 3rem;
		}
	}
}

JavaScript

 
	
namespace ObjectFitHandler {
	export class ObjectFit {
		imageContainer: HTMLDivElement | null = document.querySelector("[data-banner-image]");
		objectFitImage: HTMLElement | null | undefined = document.querySelector("[data-banner-image] img") as HTMLElement;
		constructor() {
			if ("objectFit" in document.documentElement.style === false &&
				document.querySelector("[data-banner-image]") != null) {
				this.objectFitIE();
			}
			this.objectFitIE();
		}
		private objectFitIE = () => {
			const getObjectFitImageAttr: string | null | undefined = this.objectFitImage?.getAttribute("src");
			const objectFitParent: HTMLElement = this.objectFitImage?.parentElement as HTMLElement;
			// const objectFitParent: HTMLElement = this.objectFitImage?.parentElement?.parentElement as HTMLElement; for usage with picture elm
			objectFitParent.style.backgroundImage = "url(" + getObjectFitImageAttr + ")";
			(this.objectFitImage as HTMLElement).style.display = "none";
		}
	}
}
// tslint:disable-next-line: no-unused-expression
new ObjectFitHandler.ObjectFit();