How to Fade Image Edges with CSS Masks (No Transparent PNGs Needed)

I had a photo on a website that had a subject in the middle and a background of a single colour. I wanted to centre the image and have a background flank the left and right side when the window was wide. The problem is matching the colour with the background and the left right side was difficult so you would always see the change.

So how to solve this? Use a png with transparency? That would add size to the image unnecessarily. A neat trick was to add a css mask to the image

img{
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: cover;

	width:600px;
	margin:auto;
	display:block;
	height:100%;
	object-fit:cover;
}

This would fade the left and right side of the image nicely. But what about when the width of the page is less than width of the image. I don’t want the sides of the subject of the image to be faded. Media queries to the rescue!

@media (max-width:450px){
	.imagewrap{
		img{
			width:100%;
			mask-image:none;
			-webkit-mask-image:none;
		}
	}
}