Is height style img tag on iPhone browser is different with others browser?

Question

This is weird, I tested on many device (all of them Chrome) its all okay when it come to iPhone I got weird result on img tag, there is extra height that I can't find it.

This is my HTML that containing img tag:

<div class="row align-content-center" id="tips-input">
     <img class="col-5 img-fluid" src="images/tips-image.svg"/>
     <div class="col-7">
          Photo Code bisa ditemukan di dalam foto yang telah ter-print
     </div>
</div>

And this is coresponding CSS:

 #input-foto #input-box #tips-input img {height: auto;}

Here is screenshot on my device:

Heres is screenshot on iphone device:

Hmm, its not what I want, 100vh makes the height fit to height of device screen, what i want is remove that extra space,,, :( — Kevin Juniawan, Jan 27 '20 at 19:14
Is it possible to post the URL? It would be easier to inspect. — leek, Jan 27 '20 at 19:45

score 0 · Accepted Answer · answered Jan 28 '20 at 04:17

0

Okay, apparently there is flex box bug on safari browser.

Here is the answer on related topic.

Image stretching in flexbox in Safari

answered Jan 28 '20 at 04:17

Kevin Juniawan

13
3

Why in my case the image not stretching, its because i use svg image so its maintain object shape, but compromise the padding of image, so its appear as extra height problem, the actual problem is flex box on parent of img element – Kevin Juniawan Jan 28 '20 at 04:21

Is height style img tag on iPhone browser is different with others browser?

1 Answers1