homepage Welcome to WebmasterWorld Guest from 50.17.7.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
Forum Library, Charter, Moderators: bakedjake

Smartphone, Wireless, and Mobile Technologies Forum

    
Make images adaptive is really a headache! I need your help!
jzyk




msg:4482398
 2:48 am on Aug 7, 2012 (gmt 0)

I have 2 problems I can't solve myself. I need your help.

1. I want to make a responsive website. So I set proportional value for the width of all the main parts of the site.

Part of the css as follow:

#header, #footer {
width: 100%
}

div#header {
background-image:...
}

div#footer {
background-image:...
}

So when I view the site in a smaller screen, the site goes fluid and the #header and #footer are smalller. But the problem is the background images are not smaller. So only part of the images can be seen.

How to solve this problem?

2. I also use the adaptive-image script so that I can make all the images adaptive. But when I ran this script on my hosting, something strange happened. The script worked, but it only worked for 3 images.I checked the ai-cache folder, it only worked for the header, footer and content div background images. It didn't work for other images within the content. Why this happened? All the images are in the same folder!

How can I get the script work for all the images?

 

Marshall




msg:4482407
 3:24 am on Aug 7, 2012 (gmt 0)

div#header {
background: url('your_image_url') left top no-repeat;
-moz-background-size:100% auto; /*use auto 100% if you want it to resize based on height */
background-size:100% auto;
}
div#footer {
background: url('your_image_url') left top no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;
}

Instead of a script, you can use multiple style sheets:
<link rel="stylesheet" type="text/css" href="max_width_320.css" media="only screen and (max-width: 320px)" />
<link rel="stylesheet" type="text/css" href="width_321_480.css" media="only screen and (min-width: 321px) and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="width_481_800.css" media="only screen and (min-width: 481px) and (max-width: 800px)" />
<link rel="stylesheet" type="text/css" href="min_width_801.css" media="only screen and (min-width: 801px)" />

However, since IE8 and below have trouble with max-width and max-height, among other things, so you should include a conditional style sheet for less than or equal to IE8 using fixed widths:

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" media="all" />
<![endif]-->

Marshall

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved