I am currently troubleshooting a webpage with multiple images displayed in a column. Despite only having one image present while debugging, the issue persists. When utilizing the Chrome Device toolbar or minimizing the window size significantly, the image scales correctly:
https://i.sstatic.net/T0NAb.png
https://i.sstatic.net/uxiHj.png
However, when viewing the page on an actual mobile device, the image becomes distorted.
https://i.sstatic.net/MMHhD.jpg
I have tested this on iPhone 7 and 8 as well as an iPad, using both Chrome and Safari, and the issue remains consistent. The image is consistently stretched vertically, regardless of which image I use.
My current code snippet is as follows:
<div class="container contentContainer justify-content-center">
<div class="row justify-content-center mt-5 mb-1">
<img src="..." class="fileImage">
</div>
</div>
As for the CSS styling:
.contentContainer{
height:100%;
margin-top:-56px
padding-top:61px;
padding-bottom:5px;
text-align:center;
}
.fileImage{
display:block; //attempted fix, no effect
height:auto; //same outcome
width:100%;
}
Any insights on the root cause of this issue and possible solutions would be greatly appreciated.
UPDATE
I have managed to resolve the scaling issue by using object-fit:contain. While setting it to cover resulted in correct scaling, the image went off-screen regardless of the specified size. This has also brought up a new problem. In order to showcase this issue, I have added a border. My updated CSS:
.fileImage{
object-fit: contain;
object-position: center;
box-sizing:content-box; //attempted solution, no change...
max-width:100%;
border:1px solid red;
}
Outcome: https://i.sstatic.net/1BTJW.png