CODEWITHSUNDEEP
htmlcss
Dave
Dave

Reputation: 2018

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

Upvotes: 0

Views: 1651

Answers (2)

Nantu Dutta
Nantu Dutta

Reputation: 1

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

Upvotes: 0

helrabelo
helrabelo

Reputation: 551

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

Upvotes: 4

Related Questions