SyntaxScrewer's Blog

May 1, 2012

iPad – Mobile Safari – Resizes High Resolution Images to fit the browser window size.

Filed under: iOS — geekymaira @ 5:32 pm
Tags: , , , , , , ,

Hey guys,

I ran into an issue with Mobile Safari and its quirky behavior which forces a re size of a high resolution image.
The issue occurs even when doing any of the following simple things.

1) Load up the image as the body background
2) Load up the image as a div background
3) Load up the image in an img tag in the body.

In all the above, if the image resolution > that the browser’s it resizes the image to fit in.
In cases of the div/img, it resizes the div/img containers which cause the background-image/src to size automatically.

I kept searching for solutions online and found other important information pertaining to iPad web development
in the Apple Docs.

Lot of useful information there. I STRONGLY recommend that everyone goes through it.

The parts relevant to this post were found here :
Optimizing Content for Ipad Development – Apple Docs

Anyway, coming quickly to the solution – it was pretty straightforward. I’ll explain what worked for the body and the div background images.

Ok so this is how we had the body setup first (which didn’t work)

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
}
</style></head>
<body></body>
</html>

The problem with the above is that the image does not load up in its original size. Safari Mobile scales it down.

The solution is to give the body a background-size in the CSS which equals the size of the image.

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
}
</style></head>
<body></body>
</html>

The following code creates issues for the background image on the div.

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
width:1934px;
height:1612px;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The issue with the above is the same – The background image resizes.
The problem here doesn’t get fixed by applying a background-size to the css.
You also need to set the widht and height to a 100% each!!

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The above fixes the div too…
But another problem arises… What if you don’t want the div to be a 100% and a 100% width? What if you want to show only a part of the background image?
Like in case you’re loading up or animating a spritesheet? How does all of that work then ?

Well, you take a container div which houses your image div. And on the container div set the desired size you want.
Everything then falls in place.

Here’s how :

<html>
<head>
<style>
#imgHolder{
width:320px;
height:320px;
}
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style>
<body>
<div id="imgHolder">
	<div id="img">
	</div>
</div>
</body>

Hope that helps!! I know its going to serve me as a reference next time I get stuck with iPad!

Cheers!

SyntaxScrewer

Advertisements

3 Comments »

  1. i have a img tag where i load a image, and have created some area tag on the image, using image mapster i am trying to drag and drop items on the image, but it work on desktop but not on the ipad.
    i have applied your solution that giving img a class where background-size property is mentioned, also giving height and width 100%, but still it does not seems to work on ipad
    any help is much appreciated.

    Thanks
    Abhishek

    Comment by Abhishek Saxena — December 9, 2013 @ 2:48 pm | Reply

    • Abhishek,
      I’m not sure if the problem you’re facing is due to the image resizing safari behavior.

      Comment by geekymaira — December 9, 2013 @ 2:52 pm | Reply

      • May be, but the problem is this, i have a background on whom there are some ir-regular shapes drawn, i have to drag and drop some items on those areas, now the only solution which i found was to use area tag and by using image mapster library we can detect the area and drop the items there but this is working only on desktops , not working on ipad, so i searched the solution and found https://github.com/jamietre/ImageMapster/issues/85.

        Comment by Abhishek Saxena — December 9, 2013 @ 2:56 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: