css - 溢出：滚动导致图像被切断

Question

我在一个可滚动的 div 中有一个图像，我猜它被截断了大约 50%。我只能看到底部的 50%。

这是相关的CSS：

.imgContainer{
  height:auto;
  display:flex;
  align-items:center;
  overflow:auto;
}

.img{
  width: auto;
  max-width:100vw;
  height:auto;
}

这是 Heroku 上已部署版本的链接（您可能需要单击“跳过”几次才能获取图像，然后单击图像可以看到完整版本）。https://weratestatists-bot.herokuapp.com

另外，如果有人能弄清楚为什么我的网站图标不起作用，我将不胜感激。谢谢！

标签： cssimagescrolloverflow

Answer 1

您可以进行中心裁剪图像，以便显示图像的每个中心部分，并且它还将确保您的图像既不像素化也不拉伸

    Img {
Object-fit: cover;
Object-position: center;
}