title: Image stretching out only on iPhone x
body: <p>I am currently designing and building a website in html and css, and have ran into a small issue. I checked responsiveness using the chrome dev tools (sizing the window to phone and tablet sizes), and everything looked fine. However now that I checked the site on my iPhone X, the images are all stretched out vertically. I have tried multiple things but none worked.</p>
  
  <p>This is the way it looks in the chrome dev tools, with the iPhone X option selected, and with the screen set to the actual safari frame size (375, 632):</p>
  
  <p><a href="https://i.stack.imgur.com/aaZFW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aaZFW.jpg" alt="Screenshot from chrome dev tools with the iPhone X option selected"></a></p>
  
  <p><a href="https://i.stack.imgur.com/n3BM0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3BM0.jpg" alt="Screenshot from chrome dev tools with the actual iPhone X safari frame size (375, 632)"></a></p>
  
  <p>And here is a screenshot of what it actually looks like on my phone:
  <a href="https://i.stack.imgur.com/Ybw9w.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ybw9w.jpg" alt="Website on my physical phone"></a></p>
  
  <p>This is the html layout of the frame:</p>
  
  <pre><code>&lt;h1&gt;Your 10 most watched series&lt;/h1&gt;
  &lt;section class="series-image-list"&gt;
      &lt;img src="..." alt="..."&gt;
      &lt;img src="..." alt="..."&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And this is the corresponding css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Any help as to why the images are stretched out vertically would be greatly appreciated!</p>