title: My width attribute is overriding object-fit: contain
body: <p>I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport. </p>
  
  <p>The image is supposed to shrink and expand to stay between the two side columns, which it does because of
  a percentage <code>width</code> css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.</p>
  
  <p>For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image. </p>
  
  <p>I thought I was on to something with <code>object-fit: contain</code> but alas, it appears width will always prioritize itself over <code>object-fit</code>.</p>
  
  <p>Any help would be much appreciated, as I'm quite new to web dev.</p>
  
  <p>Here is a link to a client-side view of what I have so far:
  <a href="https://jsfiddle.net/ydumcrnk/" rel="nofollow noreferrer">https://jsfiddle.net/ydumcrnk/</a></p>