Переполнение: прокрутка, приводящая к обрезанию изображения

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

Также, если кто-нибудь сможет выяснить, почему мой favicon не работает, я буду очень признателен.Спасибо!

Answer 1

Изменить

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

на

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

Кроме того, в некоторых браузерах ваш значок не работает, потому что вы вставили 2 косые черты в URL

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

должно быть

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

Answer 2

Вы можете сделать центральное изображение кадрирования так, чтобы каждая центральная часть изображения отображалась и также обеспечивала, чтобы ваше изображение не было ни пиксельным, ни растянутым

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