html - 如何在 div 中向上移动图像以便裁剪顶部而不是底部？

Question

我有一个包含图像的 div，该图像已展开以适合整个页面的宽度和大部分页面的高度。

.mainarea {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.sliderarea {
  border: 0px solid red;
  width: 605%;
  height: 80vh;
}

.slideimg {
  width: 16.5%;
  height: auto;
}

.imagetext {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  color: white;
}

<div class="mainarea">
  <div class="layer"></div>

  <div class="imagetext">
    <h1>Slogan</h1>
    <button>Place An Order</button>
  </div>


  <div class="sliderarea">

    <img class="slideimg" id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8%2bw&pid=ImgRaw&r=0">
  </div>
</div>

这是一系列将从侧面滑入的图像。现在虽然我主要关注第一张图片。问题是通过扩展图像，它会自动缩放，因此图像的底部现在被裁剪了。有没有办法让我向上推它，使顶部被裁剪/隐藏，我可以看到底部。(我尝试使用 object-position: 0 -50%; 但那没有用。)

Answer 1

.mainarea {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.sliderarea {
    border: 0px solid red;
    width: 605%;
    height: 80vh;
}

.slideimg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
.imagetext {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 50%;
    color: white;
}

<div class="mainarea">
<div class="layer"></div>

<div class="sliderarea">

  <img class="slideimg" id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8%2bw&pid=ImgRaw&r=0">
</div>

<div class="imagetext">
  <h1>Slogan</h1>
  <button>Place An Order</button>
</div>
</div>
</div>