title: Make image wider than parent <div> while preserving vertical space?
body: <p>If you have a parent <code>div</code> of fixed width, is it possible to make a child <code>&lt;img&gt;</code> wider than the parent, while constraining proportions, while also preserving vertical space?</p>
  
  <p>While <code>position:absolute;</code> can break the image out of the normal document flow, I don't want to remove the vertical space the image retains. If I did, any content that appears after the image would be pushed upwards, and as a result, it would appear behind the image.</p>
  
  <p><a href="http://jsfiddle.net/s5hf3aqc/2/" rel="noreferrer">Here's an example fiddle.</a></p>
  
  <p>Image one represents the vertical behavior I want. Obviously, if the image were horizontally larger, the height should increase proportionally. Image two represents the horizontal behavior I would want. However, this does not preserve vertical space. I experimented with negative margins, but couldn't get anything viable working.</p>
  
  <p>Assuming unknown image dimensions, is the desired effect possible without JavaScript?</p>