title: What is the best solution for making a responsive "hero" image?
body: <p>I'm having a problem getting a hero image to meet the expectations of the client. </p>
  
  <p>On desktop view, the image fits in the hero <code>div</code> as expected and appealing to the client, however as the viewport gets smaller, on mobile, parts of the image gets cut off to retain the ratio of the image. The client does not like that. </p>
  
  <p>I can't make the width and height 100% because the image will become distorted. If I set width to 100% and height to auto, the image still gets cut off in certain areas, Or the image gets smaller in height than the container, leaving a lot of white space. Is there a recommended solution to fix this problem?</p>
  
  <p>Is it recommended to use a background image for the hero image, and style appropriately?</p>
  
  <p>Is it better to have multiple sized images and use <code>&lt;picture&gt;&lt;/picture&gt;</code> to display different images based on screen size?</p>
  
  <p>Or use CSS3 vh, vw units?</p>
  
  <p>Should I just use media queries to adjust the height of the hero container?</p>
  
  <p>Should I just get an image from the client that is the right proportion for the hero container?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="hero-container" style="width: 100%;display: inline-block;"&gt;
      &lt;img src="https://imgurl"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.hero-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      height: 400px;
  }
  
  .hero-container img {
      margin: 0px auto;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      -o-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background: #999;
      text-align: center;
      max-width: inherit;
  }
  </code></pre>