溢出：滚动导致图像被截断

Question

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

这里是相关的css:

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

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

这里有一个 link 到 heroku 上的部署版本（您可能需要单击 "skip" 几次才能获取图像，单击图像可以看到完整版本）。 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

中放置了 2 个斜杠

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

应该是

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

Overflow: scroll causing image to be cut off