Skip navigation
Currently Being Moderated

Making images and text scalable in fluid grid

Aug 10, 2012 11:52 AM

Tags: #safari #browser #images #firefox #resize #scale #chrome #img #grid #fluid

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?

 
Replies
  • Currently Being Moderated
    Sep 6, 2012 7:33 PM   in reply to ladobeugm

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points