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

Question

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

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

我试过 iPhone 7 和 8 以及 iPad、chrome 和 safari，问题是一样的，无论我使用什么图像，图像总是垂直拉伸(stretch)。

我目前的代码:

<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

已解决因此，在使用不同的 CSS 调整大小等大约 2 小时后，这个 CSS 并删除了行元素。我不太清楚为什么，但确实如此。

<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 中的缩放方式相同。希望这对任何人都有帮助!