title: Cut the bottom of an image instead of the top when it doesn't fit
body: <p>I have a div which constains an image with diferent srcsets. I have set the div and image width and height to 100% so that the img embrace the whole page, so it is easy to assum that depending on the device screen it will show a bigger or a lower portion of the image when it doesn't fit on the div.
  I'm ok with that, but the problem is that I want the image to be showed by the top so that if the height doesn't fit the 100% of the screen height and a part of the img gets cutted it is the bottom of it, but the img starts loading by the bottom and its the top the who gets cutted.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.portada {
    width: 100%;
    height: 100%;
  }
  
  #portadaImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .portadaLetras {
    position: absolute;
    color: #FFFFFF;
    font-size: 2em;
    width: 33%;
    min-width: 170px;
    text-align: center;
    background-color: #000000;
  }
  
  .centerBoth {
    display: flex;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="portada centerBoth"&gt;
    &lt;img id="portadaImg" class="img-fluid" srcset="images/portada/portada-xl.jpg 2400w,
                    images/portada/portada-l.jpg 1200w,
                    images/portada/portada-md.jpg 992w,
                    images/portada/portada-tablet.jpg 768w,
                    images/portada/portada-mobile.jpg 458w" src="images/portada/portada-mobile.jpg" alt="Foto de portada"&gt;
    &lt;div class="portadaLetras"&gt;
      Saint Paolo
      &lt;p&gt;MMXIV&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea what property am I missing?</p>