溢出：滚动导致图像被剪切

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

如果有人能弄清楚我的收藏夹图标为什么不起作用，我将非常感激。谢谢！

Answer 1

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

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

Answer 2

更改

.post, .titleCont {
    display: flex;
    align-items: center;
}

到

.post, .titleCont {
    display: flex;
    align-items: baseline;
}

在某些浏览器中，您的收藏夹图标也被破坏了，因为您在URL中添加了两个斜杠

<link rel="shortcut icon" href="//favicon.ico?v=2">

应该是

<link rel="shortcut icon" href="favicon.ico?v=2">