Image stretches on iPad only

Question

I have been working on this website: http://www.adhonis.com

The banner image at the top is horribly scaling for iPad's, I have used screenfly to test it but it seems its not doing it through the simulator, I assume that is because all it is really simulating is the screen size. All other devices are fine though.

See a screenshot here: http://i39.tinypic.com/vyts47.jpg

I don't personally have access to an iPad so it is a tricky issue here.

I am using height:100%;

Would love to hear any thoughts

Answer 1

I had the same problem, but with older iPads (1st Gen with iOS 6). No problem with the most recent ones. The problem is the 100% height. Remove it and it should work.

Answer 2

I had the same problem in one of my project too. Website logo looks stretched on iPad and iPhone devices.

Then i realized, i accidentally add display: flex; property to image. That was to problem. Maybe this information will help somebody.

Answer 3

I was having this same problem with a bootstrap site I was working on, and here's what I did to fix it:

I moved the image outside of any divs with class of .row, .col, or .container. Then, I removed the height: 100% attribute and added:

img {
    width: 100vw;
}

See if this works!