css - 图像在移动设备上拉伸（仅限 iPhone），但在 PC 上的浏览​​器预览中没有

Question

我目前正在我的网站上工作。我意识到，在查看移动网站时，我的一张图片拉伸/改变了它的纵横比。请记住，这仅适用于 iPhone。我让几个朋友看这个网站，只有拿着 iPhone 的人才能把图片拉成这样。

这是浏览器上的页面

这是我的 iPhone 11 上的页面

<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
  <img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>

我原来有 height: auto; 在那里，当试图解决这个问题时，我发现一个较旧的帖子说这可能是问题所在。可悲的是它没有解决它。我知道我可以通过媒体查询轻松解决这个问题，但是这一定是有原因的，为什么这只发生在 iPhone 上。我也只有在这张图片上的身体造型，你可以在检查器的浏览器预览中看到它。

如果你想自己看看。网站网址是https://www.robinalexander.at/about-me

标签： cssimagetwitter-bootstrap

Answer 1

尝试从中删除类d-xl-flex align-items-xl-center并img给它一个display: block. 父母div将保持img原位