SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Different Images Served For Different Media

    Sitepoint Members,
    How can I have desktops pick up one image heading my site and tablets and cell phones pick up a smaller version of the same image. The image (picture) is crowding out some of my title causing half the title to be left of the image and the rest below the image.

    Thanks,

    Chris

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    You would create variations of image and swap them out using media quer(ies) targeting specific screen sizes. An alternative approach would be to dynamically size the container and resize the image using CSS relative to the container dimensions.
    The only code I hate more than my own is everyone else's.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    818
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You could be using @media queries.
    the at the breakpoint code in the diff image
    so for example

    Code:
    @media screen and (min-width: 1008px) {
    
    .box{
    background-image: url(whateverLarge.jpg);
    }
    
    }
    @media screen and (min-width: 846px){
    .box{
    background-image: url(whateverSmall.jpg);
    }
    
    }
    this is another example w/a min &max. got tihs at http://css-tricks.com/css-media-queries/


    Code:
    @media all and (max-width: 699px) and (min-width: 520px) {
      #sidebar ul li a {
        padding-left: 21px;
        background: url(../images/email.png) left center no-repeat;
      }
    }
    It can be pretty neat. you can changes images along w/ all other settings.
    D

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    818
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh & of course you could also size the image with % rather than px.

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    One unconventional way to do it is to output your large graphics at 40-60%. That shaves off a great deal of size, and they still look good enough large or small. Then you serve the same image at all screen sizes.

    Obviously, you should test with a sample image yourself first.
    Steve Husting

  6. #6
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using css you can change the size of the picture dynamicaly its better to know about the screen size with that your site wont be over crowded with pictures.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •