Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: bakedjake

Message Too Old, No Replies

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

   
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?
3:24 am on Aug 7, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month