Html 移动图像失真问题

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

桌面： 流动电话：

所附图片的HTML和CSS如下：

HTML:

---

知道这里会发生什么吗？

图像失真从来都不是一件有趣的事。一个简单的解决方案是使用css属性来定义容器变形时的图像行为

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

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

---

如果一个答案有效，你会认为这是最好的答案吗？这完全不起作用-图像不再失真，但我仍然有一个问题，即图像高度在移动设备上显著增加，而不是随着宽度缩小。你知道这是为什么吗？如果你在浏览器中检查图像和容器组件，它们是否有你在上面的例子中没有包含的CSS属性？在我看来，容器（面板3）有一些您没有意识到的属性。尝试将panel-3高度设置为自动，或将数字和宽度设置为100%。

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

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

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

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