Ok. The CSS code you provided does not correct the issue.
Sorry, that was just an attempt to help.
(4) Neither the the code change described in (2) above, nor the Blog Designer style sheet effects theses images when the are displayed on an AMP version of the blog page.
As is expected because neither of those are in use on the AMP version.
(5) Therefore, it appears that the images are displayed in the largest scale allowed by the container(s) they are displayed in.
I replied in details to that, let me quote again:
If you use the "Header Image URL" in the main settings page, this is intended for a header image, that is a logo or maybe just your image of a house, definitely not a banner, the image is really hard to resize in that position. Can I ask why you are using a small square image inserted into an image of very wide background instead of just the proper square house image itself? that would work fine I think.
If you use the "Header background image URL" field from the Customize settings page, the image you provide there will be stretched or sized down to fit your header, so you might want to use that.
The "Header Image URL" is displayed by our CSS exactly as is. It is meant for a logo for instance, not a banner.
Is there any way to control the size of these images using CSS code?
Most certainly. I of course cannot provide custom CSS for you but I don't see why it would not be doable, that's just CSS. The other, proper way of doing this is of course to supply a suitable image instead of a banner image.