Cover page adding 'glaze' to images and weird cropping

Hi.  I have a cover page on both of my websites (www.KellyWilliamsPhotographer.com and www.KellyWilliamsCorporate.com).  They both use the Jin template.  All the images are sized the same at 2000 px on the widest side and 72 DPI.  The design section of the cover pages shows everything looking fine, but when the site goes live, there is an odd automatic cropping going on and some sort of 'glaze' covering the images (the images don't appear as vibrant as they actually are).  Is there a way to prevent this from happening, is it just the cover page template I used, or is there some added CSS I can use to solve the issue?  (examples attached)

You can use CSS code to limit text width, by adding this to Cover Page Header Code Injection (do not add to Custom CSS)

<style>
  @media screen and (min-width:992px) {
  h1#sqs-slash-page-header {
    max-width: 450px;
}
  }
</style>

Thanks for your reply.  I am assuming there is no way to do this without upgrading my site to allow me to do the code injection.