В настоящее время я проектирую и создаю веб-сайт в html и css, и столкнулся с небольшой проблемой. Я проверил скорость отклика с помощью инструментов chrome dev (размер окна соответствует размеру телефона и планшета), и все выглядело нормально. Однако теперь, когда я проверил сайт на моем iPhone X, все изображения растягиваются вертикально. Я пробовал несколько вещей, но ни одна из них не работала.
Вот так это выглядит в инструментах chrome dev, с выбранной опцией iPhone X и с экраном, установленным на фактический размер кадра сафари ( 375, 632):
А вот скриншот того, что это на самом деле выглядит на моем телефоне: 
Это html макет кадра:
<h1>Your 10 most watched series</h1>
<section class="series-image-list">
<img src="..." alt="...">
<img src="..." alt="...">
</section>
И это соответствующий css:
.series-image-list {
position: relative;
width: 100vw;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
margin-right: 50px;
}
.series-image-list img {
width: 35vh;
height: auto;
margin: 0;
margin-left: 25px;
margin-top: 20px;
margin-bottom: 20px;
transition: all .2s ease-in-out;
}
Любая помощь в том, почему изображения растягиваются вертикально, будет принята с благодарностью!