So I'm creating my first Fluid Grid design and I'm having issues with making images scalable and look appropriate. Take a look at this example and the four social media icons on the top right. They're in one div id called sociaLinks. I have in my style_fg.css that the img attribute is set to 3em but that doesn't make the image scale as you resize the browser. I tried doing something like 25% (actually, a little less and I used that figure since there's four images in the div) and that worked in Firefox but in Chrome and Safari, it just appeared as what might as well have been a dot. So how can I make it where the multiple images can scale with the browser?
Likewise, I have a similar issue with making text do the same thing. In this case, my #access div which I'd like the font to resize with the browser. Any ideas on making that work?
You can make images scaleable using CSS3 like this:
div
{
background-image:url('mypicture.png');
background-repeat:no-repeat;
background-size:cover;
}
You can also use vendor specific code to make this code compliant in browsers that don't have css3 yet:
/* Safari,Chrome */
-webkit-background-size: cover;
/* Seamonkey */
-moz-background-size: cover;
/* Opera */
-o-background-size: cover;
Hope this helps.
North America
Europe, Middle East and Africa
Asia Pacific