图片无法在移动设备上正确缩放，但可以在响应窗口中缩放

Question

我有一个网页，其中包含一列中的多个图像。现在，在调试过程中，我只放置了一张图像，问题仍然存在。 问题是，当我使用Chrome设备工具栏或尝试将窗口调整为非常小的尺寸时，图像会正确缩放：

但是当我在实际的移动设备上访问该页面时，该页面会变形。

我在所有的iPhone 7和iPhone 8上都尝试了iPad，Chrome和Safari，问题是一样的，无论我使用什么图像，图像总是垂直拉伸。

此刻我的代码：

<div class="container contentContainer justify-content-center">
    <div class="row justify-content-center mt-5 mb-1">
        <img src="..." class="fileImage">
    </div>
</div>

和CSS：

.contentContainer{
height:100%;
margin-top:-56px
padding-top:61px;
padding-bottom:5px;
text-align:center;
}
.fileImage{
display:block; //already an attempt to fix, no effect
height:auto; //same as above
width:100%;
}

任何引起此问题以及如何解决的想法都将受到赞赏。

更新

我设法使用object-fit:contain正确缩放了图像。设置封面时，它的缩放比例正确，但是无论我尝试设置什么尺寸，都无法显示在屏幕上。这个也有问题。我设置了一个边界，以说明。我的CSS：

.fileImage{
object-fit: contain;
object-position: center;
box-sizing:content-box; //again, just an attempt to fix current issue, no effect...
max-width:100%;
border:1px solid red;
}

结果：

Answer 1

已解决 因此，经过2个小时的摆弄不同CSS的大小调整等工作之后，此CSS并删除了row元素。我不太确定为什么，但是确实如此。

<div class="container contentContainer justify-content-center">
        <img src="..." class="fileImage mt-5 mb-1">
</div>

CSS：

.fileImage{
object-fit: contain;
max-width:100%;
}

并且按预期工作，可以按照与桌面chrome中相同的方式在移动设备上缩放，具体方法请参见原始问题的屏幕截图。希望这对任何人都有帮助！

Answer 2

可能是元数据出现问题。您是否在head标签中定义了视口元标签？