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

Question

我有一个 div，其中包含具有不同 srcsets 的图像。我已将 div 和图像宽度和高度设置为 100%，以便 img 包含整个页面，因此很容易假设，根据设备屏幕，它会显示图像的更大或更低部分。 t 适合 div。我对此表示同意，但问题是我希望图像由顶部显示，这样如果高度不适合屏幕高度的 100% 并且 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;