CSS手机图像失真问题

Question

我在一个网站上工作，其中有一个面板的三个图像，形成了横幅在屏幕上的排序。就像这样，就像第一张图片。当我在iPhone或iPad上查看它时，图像是垂直拉伸的，如第二张图像所示。这似乎不是浏览器的问题，因为这个问题在Chrome和Safari上都存在，但这也不仅仅是视口宽度的问题，因为当我在电脑上使用相同的vw时，我不会遇到这个问题。我清除了浏览器缓存，但问题仍然存在。有趣的是，并不是网站上的所有图片都是这样的；它们中的大多数都没有这个问题。

台式机:移动版：https://ibb.co/Km7k4NF

所附图片的HTML和CSS如下：

HTML：

 <div class="panel-3">
        <img src="/img/matthew-james-dunham.jpg" title="Matthew Weathers (MM 2019), playing in masterclass for Rice University viola professor James Dunham"
        ><img src="/img/nuso-violas.jpg" title="Members of the studio play in the Northwestern University Symphony Orchestra viola section"
        ><img src="/img/sae-rheen.jpg" title="Sae Rheen Kim (BM 2020) plays in studio class">
    </div>

CSS：

.panel-3 {
    display: flex;
    padding: 10px;
}

.panel-3 img {
    width: calc(100% / 3);
}

知道这里会发生什么吗？

Answer 1

图像失真从来不是一件有趣的事情。一个简单的解决方案是使用object-fit css属性来定义图像在其容器扭曲时的行为。

panel-3 {
    display: flex;
    padding: 10px;
}

.panel-3 img {
    width: calc(100% / 3);
    height: auto;
    object-fit: cover;
}