[Theme: Twenty Sixteen] PHP function (?) causes ugly stretching of images

I wanted a WP theme which would allow (travel) articles I’ve written to be presented in format similar to that of Medium.com. Being able to use high quality imagery in FULL width is a key element of this. After failing at finding a theme that could deliver what I was looking for, I decided to set up a Twenty Sixteen child theme and modify it to my needs.

Here’s an example page http://www.purremedia.no/kazbek/

I’ve achieved most of what I want to do, but there’s a problem with how images are displayed. I upload photos at 3000×2000 pixels using WPs Add Media button. They are only lightly compressed and high quality. The photo at the very top exemplifies the quality of these photos as it should be. To achieve the text overlay, this particular photo was manually added as a background in a <div>. However, if you scroll down to the second photo, you will notice that the page displays a small, upscaled copy of the photo. The result is a somewhat blurry photo with particularly striking artifacting where the blue sky meets the mountains. The same is true of the subsequent photos on the page, which all have in common that they were added with WPs Add Media button.

One work-around would be to manually upload and add inn these images instead, similar to what I did with the topmost photo. However, I would prefer to be able to use the quick and simply Add Media button for this. So I’d prefer to fix the underlying issue.

The fix should, at the very least, result in the page displaying the full size, 3000×2000 pixel version, downscaled to fit the viewport being used (yes, I know it’s big and will lead to slow loading, that isn’t a huge issue). An even better fix would have the page responsively load whichever file size is best suited to the viewport. I’ve noticed that upon being uploaded via the Add Media button, WordPress stores the 3000×2000 pixel original and additionally generates 1200, 1024, 768, 300 and 150 pixel versions. Ideally, a solution would make WordPress display these versions when suitable, but without stretching them. Better then to use a too large version, and downsize it.

After a lot of poking around, I believe I’ve found the source of the issue, though I do not understand it. After inspecting the HTML code for these photos, I noticed there was some code there which I have not added to the posts myself. Rather, it is added from functions.php. I looked it up in the parent theme’s functions.php file, and found the following bit of code:

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images
 *
 * @since Twenty Sixteen 1.0
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                      values in pixels (in that order).
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
	$width = $size[0];

	840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';

	if ( 'page' === get_post_type() ) {
		840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	} else {
		840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
		600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	}

	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );

While I’m fairly adept at HTML and CSS, I’m almost completely clueless as far as PHP goes. I tried copying this bit of code into the child theme’s functions.php file and experimented with it, but that just lead to the entire page blanking out. At the moment, there’s no custom PHP added in the child theme’s functions.php.

Can anyone help me out with putting together the necessary PHP code to resolve this issue? Or is there perhaps some non-PHP way of fixing this?

PS: I’m on Windows 10, using Firefox (but Chrome displays it the same way).