title: Dealing with height and width overflow
body: <p>Given an image, I would like to lock the width at 426px, and adjust the height
  as needed.</p>
  <p>Regarding the height, I only want to see the centermost 240px of the image.
  Regarding the width, I would like the full width visible, but if the screen is
  too narrow, then view as much of the width from the center as possible. I have
  this as a start:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
  figure {
     border: medium solid red;
     height: 240px;
     max-width: 426px;
  }
  img {
     width: 426px;
  }
  &lt;/style&gt;
  &lt;figure&gt;
     &lt;img src=&quot;https://i.ytimg.com/vi/xMzpFTcT4eg/sddefault.jpg&quot;&gt;
  &lt;/figure&gt;
  </code></pre>
  <p>but the image is not centered, it is locked at the top. Is it possible to
  vertically center the image, hiding height overflow, while also hiding width
  overflow if needed?</p>