html - 当图像不适合时，剪切图像的底部而不是顶部

Question

我有一个包含具有不同 srcset 的图像的 div。我已将 div 和图像宽度和高度设置为 100%，以便 img 包含整个页面，因此很容易假设它会根据设备屏幕显示更大或更小的图像部分。不适合 div。 我同意，但问题是我希望图像显示在顶部，这样如果高度不适合屏幕高度的 100% 并且 img 的一部分被剪切，它就是底部它的一部分，但是 img 从底部开始加载，而它的顶部则被剪切了。

.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;
}

<div class="portada centerBoth">
  <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">
  <div class="portadaLetras">
    Saint Paolo
    <p>MMXIV</p>
  </div>
</div>

知道我缺少什么属性吗？

Answer 1

除了我已有的属性之外，将以下属性添加到 .portada 类:

object-position: center top;