title: Center a large image of unknown size inside a smaller div with overflow hidden
body: <p>I would like to center an img inside a div <strong>without javascript</strong> and <strong>without background-images</strong>.</p>
  
  <p>Here is some example code</p>
  
  <pre><code>&lt;div&gt; 
      &lt;img src="/happy_cat.png"/&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>I don't know the size of the img and it should be able to exceed the width of the parent</li>
  <li>I don't know the width of the parent div (it is 100%)</li>
  <li>The parent div has a fixed height</li>
  <li>The image is larger than the parent and the parent has overflow:hidden</li>
  <li>Only need to support modern browsers</li>
  </ul>
  
  <p>Desired result. (Ignore opacities etc, just note the positioning).</p>
  
  <p><img src="https://i.stack.imgur.com/0NrWT.jpg" alt="enter image description here"></p>
  
  <p>I know this can be done easily with background images but that isn't an option for me. I could also use javascript but it seems like a very heavy handed way to achieve this.</p>
  
  <p>Thanks!</p>
  
  <p>Jack</p>