有没有办法让图片显示在图片的顶部而不是放大图片的中心？

Question

我想显示图像的顶部，隐藏图像的底部。溢出被隐藏，但不是从上到下显示图像，而是从中间剪切图像，隐藏顶部和底部的一小部分。有没有办法用 css 解决这个问题还是我需要手动裁剪图像？

这是我相对于图像的代码..

img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

我尝试过不同的职位类型。我对制作网站非常陌生，想不出其他方法来尝试解决问题

Answer 1

这是一种使用几个

div

容器以及

overflow-y:hidden;

和

overflow-y:scroll;

以及

object-position:

来向您展示如何实现此目的的方法。

带有红色边框的

div

向您展示如何仅显示图像的顶部部分。带有绿色边框的

div

显示图像滚动，以便您可以自己验证图像的哪一部分实际上显示为红色

div

。

要调整显示图像的哪一部分，您需要更改以下值：

object-position: 0px 0px;

类似：

object-position: 0px -200px;

更多信息请参考：MDN 上的object-position

.fixed-container {
  width: 100%;
  height: 100px;
  border: solid 3px red;
  overflow-y: hidden;
}

.scrolling-container {
  width: 100%;
  height: 100px;
  border: solid 3px green;
  overflow-y: scroll;
}

img {
  width: 100%;
  height: 500px;
  display: block;
}

.offset-image {
  object-position: 0px 0px;
}

<div class="fixed-container">
  <img class="offset-image" src="https://picsum.photos/seed/picsum/500/500">
</div>
<br/>
<div class="scrolling-container">
  <img src="https://picsum.photos/seed/picsum/500/500">
</div>