SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Banner - responsive design

    I am just trying to get my head around responsive design.

    I have made a banner for my website which is 2000px across. I want to use it for all except a phone website size page.

    The design should work (design wise) - it will look ok if its a 1900px screen, 1200px screen and 800 px screen.

    What I want to do is effectively crop the image to the size of the browser width. This is because if its a 1400 px screen then I don't want people to be able to scroll horizontally where there is no content.

    Is there a way of doing this?

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is possible.
    If you want to support also older Internet Explorers, you can put a 100% width wrapper around the image, without giving the image size in the html-code *):
    HTML Code:
    <div id="bannerWrapper":
        <img src="images/banner.jpg" alt="" />
    </div>
    And then in the css:
    Code CSS:
    #bannerWrapper img {
        width: 100%;
        }
    Now the banner image will follow the width of his parent element, the #bannerWrapper, while the #bannerWrapper is following the screen width (as div/block element: automatically).
    And if you don't give a height value for the image, the height of the banner image will follow the width: proportionally in respect to the computed value of the img-width.
    So there is also no need to give the #bannerWrapper a height: the wrapper will adapt himself automatically.
    _______
    *) Note: this can only be done (cross-browser) with a foreground image (in the html), not with a background-image.
    If you use the banner as background-image, it could be done with the css3 property "background-size", but then you loose support for IE before IE9 (see: caniuse.com/#search=background-size)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,483
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The benefit of using a background image though is that you can hide (or change) it for mobile unlike html images which always get loaded even if they are display:none.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    That's true for css media queries.
    For a foreground image you could use a javascript workaround:
    HTML Code:
    <div id="bannerWrapper">
        <!-- empty, or a noscript variant of the image (with noscript-tags around it can be styled different, if desired) -->
    </div>
    Code JavaScript:
    var screenWidth=document.getElementsByTagName('html')[0].offsetWidth;
    var bannerWrapper=document.getElementById('bannerWrapper');
     
    if (screenWidth<420){
        bannerWrapper.innerHTML='<img src="images/banner-mobile.jpg" alt="" />';
    }
    else {
        bannerWrapper.innerHTML='<img src="images/banner-desktop.jpg" alt="" />';
    }
    ... or something like that. Then only one of the images will be loaded: for the mobiles the big size banner can stay in the cloud.

    In the same way you could serve different sized images for screen widths of 800px, 1024px, 1280px, and 1900+px.
    As the image size is growing quadratically (image of 2x width = 4x more pixels, while also the height is 2x more), this can save download time for the intermediate screen sizes:
    Code JavaScript:
    if (screenWidth<420){
        bannerWrapper.innerHTML='<img src="images/banner-mobile.jpg" alt="" />';
    }
    else if (screenWidth<=800){
        bannerWrapper.innerHTML='<img src="images/banner-800.jpg" alt="" />';
    }
    else if (screenWidth<=1024){
        bannerWrapper.innerHTML='<img src="images/banner-1024.jpg" alt="" />';
    }
    ...
    else {
        bannerWrapper.innerHTML='<img src="images/banner-1900.jpg" alt="" />';
    }

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I set the banner image as a background image which stopped the scrolling with scroll 0. This was my final version. I overlaid a smaller banner which is centred

    http://www.dreamsymbolism.info/adreamrisk.php


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
  •