title: make image 100% height but proportional width
body: <p>I have a problem and I think I am just having trouble wording the question which is why I can't find an answer.</p>
  
  <p>I have a site that has an image that spans 100% height on a column. When you're looking at it above a viewport width of 1000px it looks awesome. But as you scroll down it obviously distorts and is super stretched, like the image here:</p>
  
  <p><img src="https://i.stack.imgur.com/X5LIg.jpg" alt="enter image description here"></p>
  
  <p>My question is, how can I have an image that is not a background image, that stretches 100% height, but maintains aspect ratio. Kind of like the supersized js plugin, but only on a single div instead of the whole background.</p>
  
  <p>a live version of the site can be seen at <a href="http://faithpointdallas.com/422studios" rel="nofollow noreferrer">http://faithpointdallas.com/422studios</a></p>
  
  <p>it works as desired in firefox and totally sucks in safari. Any way to accomplish the firefox result in all browsers?</p>
  
  <p>Thanks ahead of time for the help.</p>