SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full screen images with CSS?

    Back again

    I am trying to make my Nivo Slider display full screen in different screen resolutions without impacting the quality of the images.

    I have read up a lot about this and it mostly seems to come down to:

    HTML Code:
    .nivoSlider img {
    	position:absolute;
    	top:0px;
    	left:0px;
    	height:100%;
    width: 100%;
    }
    Which I have. This works in so far as it gets rid of the scrollbar.. but it doesn't make the image appear in the screen size, it just crops a corner of it.
    As you can see on my page http://ellekorhaliller.co.uk/jQuery/index.html (a work in progress!), I have 2 images that are too small and one image that is a lot bigger than the screen resolution but I put them in to see how they could be scaled to fit.

    Does anybody know a good way around this? With CSS or maybe Javascript?

    I've been going round in circles and it must be possible as there are so many great websites out there doing this!

    Many thanks in advance,

    Elle.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sounds like you might want something like this jquery plugin that Ralph posted yesterday.

    http://buildinternet.com/project/supersized/default.php

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B.

    I actually tried using Supersized but it wierdly desaturates my images quite badly.

    I wonder if there's a section in Supersized which I can use with Nivo Slider just to turn it into full screen..

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    Just been searching the web for a solution to the same problem - making the Nivo Slider work fullscreen, ie like supersized, http://buildinternet.com/project/supersized/default.php and also like this fine site: http://www.gilesrevell.com/

    Any help would be greatly appreciated! I have tried all I kow to tweak the code, ut to no avail. I would use supersized, but the transitions are laggy and horrid at 1920 x 1200, whereas Nivo handles it beatiufully!

    Thanks,
    Mark

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am not sure if I understand what you are trying to say, but if there is not enough information in a file to begin with nothing is going to save you. Nothing can make a 640 x 320 image file into a 1280 x 640 w/o sacrificing something. I think you NEED to have very large pictures ( the biggest monitor size you can think of) to begin with and the the jQuery will shrink them to size.

    Also, I thought there was a CSS3 property which did this?


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
  •