Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Banner height & width problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #235214
    aheath1
    Participant

    Hi there,

    I’m setting up a fading head banner on no.purition.com and having some trouble getting it to re-size smoothly as the browser size is changed. If you check out the static banner on http://www.purition.co.uk and re-size the browser, you’ll see that the content below moves up/down smoothly based on the image size.

    I’m basically trying to get the same with this fading banner image. With the main banner wrapper I’m forced to set the height by px, when I set as auto or 100% it disappears altogether:

    #image_fader_wrapper{
    height: 311px;
    }
    

    But by setting this fixed height, I’m left with empty space when the browser is at certain sizes (because the image is set to width: 100% of the page)

    I’m stumped!

    #235241
    Beverleyh
    Participant

    Try setting padding-bottom as % instead. That way, height is created by the padding, which is relative to width, so it will resize fluidly.

    There’s a round-up here that you might find useful http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm

    And a blog post with explanations http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.