title: Break image out of parent <div> with css only
body: <p>I'd like to break an image out of the parent div. The main problem I have is that I don't know the original image width or height. I'm also not able to use any javascript to fix it.</p>
  
  <p>Using <code>position:absolute;</code> has the right effect on the image, but the <code>&lt;p&gt;&lt;/p&gt;</code> content below then rides up underneath the image.</p>
  
  <p><img src="https://i.stack.imgur.com/eOK53.png" alt="Image breaking out of parent div"></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;h1&gt;Some Title&lt;/h1&gt;
          &lt;figure&gt;
              &lt;img src="someimage.jpg" /&gt;
          &lt;/figure&gt;
          &lt;p&gt;Some description&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div{
      width:700px;
      }
  
  img{
      width: 80%;
      margin: 0px 0 0 -40%;
      left: 50%;
      position: absolute;
      display: block;
      }
  </code></pre>
  
  <p>Edit: the image should never be wider than the browser window (and hence trigger scrolling)</p>