'Why is my picture stretched on mobile iphone safari?

In the second picture there is android, everything works fine. But on iPhones 7 on safari the image is being stretched vertically. Why is this happening? My html code and css

 <div class="configuration__grid">
                <div class="configuration__grid--box"> <img src="/img/bag.png" class="conf-img"
                        alt="picture">
                </div>

 .configuration__grid {
  display: flex;
}

.configuration__grid--box {
  flex: 0.5;
  padding: 10px;
  flex-direction: column;
  display: flex;
}

.conf-img {
  width: 100%;
  height: auto;
}

enter image description here

enter image description here

htmlcss


Solution 1:[1]

Try using and see if it helps

object-fit: cover;

Check this link for more details https://developer.mozilla.org/en/docs/Web/CSS/object-fit

Solution 2:[2]

For the iPhone or MAC os, You always need to put an image inside a container,

Like:

<div class="img-box">
 <img src="assert/img/pic.png"> 
</div>

For CSS you need to use this simple code:

.img-box{
  width:100%;
    float:left;
    height:auto;
    padding:10px;
}

by using these above codes your iPhone and MAC image or picture stretch issue will be resolved

Thanks Nantu Dutta

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 helrabelo
Solution 2 Nantu Dutta

Related Questions