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

Question

I have a webpage containing several images in a column. During debugging I have now placed only one image, the problem persist. The problem is, when I use the Chrome Device toolbar, or try to resize the window to very small, the image scales correctly:

But when I access the page on an actual mobile device, it gets deformed.

I tried iPhone 7 and 8 and an iPad, chrome and safari on all of them, the problem is the same, the image is always stretched vertically, regardless of what image I use.

My code at the moment:

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

And 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%;
}

Any ideas on what causes this and how to fix it are greatly appreciated.

UPDATE

I managed to get the image scaled correctly using object-fit:contain . When set the cover, it was scaled correctly, but went offscreen no matter what size I tried to set. There is an issue with this as well. I have set a border, to illustrate. My 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;
}

Result:

Answer 1

SOLVED So, after like 2 hours of fiddling with different CSS for sizing etc., this CSS and removing the row element worked. I'm not quite sure why, but it did.

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

CSS:

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

And works as expected, scales on mobile the same way as in desktop chrome, as per screenshot in original question. Hope this helps anyone!

Answer 2

Could be an issue with the meta. Have you defined viewport meta tags in your head tag?