Klipp og Lim | Blog
Fullscreen Image Scaling without Flash
9. April, 2009 Ι Tags: CSS, Tips and Tricks, WebdesignAfter our web designer Eirik launched the GOTOCHINA-website, there have been a lot of writings around on the web on how to do the full-screen image-effect. There have also been developers sending mails and wondering about how this technique both can center the image and scale proportionally. So therefore, in this post we’re going to give you a explanation of how it all works.
Step 1:
Unlike most full-size-background techniques, we want the image to remain relative to the center of the screen, and not to the default upper left corner coordinate. Example:
To do this, we start of by creating a holder that is 200% the size of our original area, and placing it equally outdented from the body on every side:
html,body{width:100%;height:100%;overflow:hidden} /*to give the #holder something to relate to and prevent scrollbars*/
#holder{position:absolute;width:200%;height:200%;top:-50%;left:-50%} /*with IE vertical centering-fix from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html*/
#holder[id]{display:table} /*for standard-browsers*/
Step 2:
Inside this holder, we create a div that stays centered from the top:
#holder div{position:absolute;left:0;top:50%;width:100%} /*with IE-fix*/
#holder[id] div{display:table-cell;vertical-align:middle;position:static} /*for standard-browsers*/
*:first-child+html #holder div{position:absolute}/*force IE 7 back to position:absoulte*/
Step 3:
Now we can add our image and make it center, aligned to the parent div. The -ms-interpolation-mode-variable is trick to force IE to anti-alias when resizing the image.
#holder img{position:relative;top:-50%;margin:0 auto;display:block;-ms-interpolation-mode: bicubic;width:100%}/*Setting width here creates a look-alike fallback for browsers without javascript*/
Step 4:
Since the body now is all covered with a huge image, we need to make a “new” body, where we can put our content:
#body{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;overflow:auto}
Step 5:
Create a javascript file called scaler.js. To avoid the need of any “domready” or “onload” events, we are going to place this script just after our #body-div. The script:
(function(){
var db=document.body;
var img=document.getElementById('holder').getElementsByTagName('img')[0];
var dbsize={}; //needed to store body size
var imgsrc=img.src; //needed to store images src
var keyStop=function(e){
var e=window.event||e||{};
var tag=e.target.tagName.toLowerCase();
if(tag!='textarea'&&!(tag=='input'&&(e.target.type=='text'||e.target.type=='password'))){ //are the user not writing?
if(e.keyCode==32||e.keyCode==39||e.keyCode==40){ //Did he press any of the "scrolling-keys"? (down, right, and space key)
if(e.preventDefault)e.preventDefault();
else e.returnValue=false;
}
}
}
if(this.addEventListener)window.addEventListener('keydown',keyStop,false);
else window.attachEvent('onkeydown',keyStop);
setInterval(function(){
window.scrollTo(0,0);
if(img.complete){ //check if image has loaded
if(db.clientWidth!=dbsize.w||db.clientHeight!=dbsize.h||img.src!=imgsrc){ //check if size or img size has changed
imgsrc=img.src; //store current src
dbsize.w=db.clientWidth; //store current body width
dbsize.h=db.clientHeight; //store current body height
var newwidth=Math.round(dbsize.h*(img.offsetWidth/img.offsetHeight)); //calculate new width based on height
img.style.width=(dbsize.w>newwidth?dbsize.w:newwidth)+'px'; //use the largest value of body-width and newwidht
//and this is the real trick: if there's no specified height, the height is automaticly calculated relative to the with
}
}
},300);
})();
Step 6:
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Scaler</title> <link rel="stylesheet" type="text/css" href="scaler.css" /> <meta http-equiv="imagetoolbar" content="no" /> <!--Prevent IEs anoying imgage toolbar--> </head> <body> <div id="holder"> <div><img alt="" src="your_photo.jpg" /></div> </div> <div id="body"> Your content </div> <script type="text/javascript" src="scaler.js"></script> </body> </html>Share on Facebook
Search
Categories
- 3D
- Advertising
- Audio
- Design
- Effects
- Flash
- Inspiration
- Motion graphics
- Movies
- Music
- News
- Showreels
- Technology
- Tips and Tricks
- Uncategorized
- Web Development
Delicious
Subscribe
Will D. White
Thats a pretty awesome technique. I can’t wait to see folk’s take on that in the future. Until flash becomes fully SEO integrated coming up with techniques like this is one of the things designers should be doing if they want to call themselves innovative.
Cody
Why not just design it with a single div, and do it all with Javascript since you need to script the image resize anyhow? The CSS seems pretty pointless and can be done all in JS…. Is there some benefit to the CSS *tricks* I am missing?
Well, the trick with css etc. is 2 things;
- this way, the browser does most of the math natively
- even if javascript is disabled, the result won’t be far from the wanted effect :)
Smitty
No disrespect.. but ever notice what happens in Firefox on a mac when you hit the space bar?
@Smitty: You’re right, thanks for the tip :) Source-code is now updated
Stephan
Great tutorial, but could you optimize your code for IE7?
It’s because IE7 doesn’t want to show the image.
All other browsers (incl. IE6!) seem to work.
Stephan
Supplement:
It seems, that IE7 uses position: static; for #holder div {} instead of position: absolute;
Try to delete position: static; from #holder[id] div {} and you’ll see what I mean.
@Stephan: Huh, that’s right! I’ve added a conditional comment for IE7 now. Thanks for the tip :)
Stephan
Hi Eirik, first of all thanks for the little fix, it worked well.
But I did further browser-testing and found another two problems you might be interested in. Both have to do with »mouse-wheel-scrolling«.
Opera 9.64 scrolls beneath the fullsized image even if there’s no scrollbar or long content on your website. This causes that your content disappears at the top of the page and you’ll get a lot of empty space at the bottom of your page. It’s really ugly. :(
IE7 & IE8 both won’t let you scroll if your mouse-cursor isn’t located over a content div. This has to do with overflow:hidden for body I think which all MSIE have problems with. Do you know a workaround for that?
If you want to check this, just test the GOTOCHINA-website or your demo from above.
Stephan
Supplement:
Eirik, I’ve tested your script on the iPhone and I regret to say that it doesn’t work. The background image won’t display at fullscreen on entering the homepage. Even if you try to zoom in your page the script seems not working right. It’s hard to describe how it fails so perhaps you should have a look at your own (iPhone).
Eirik… Thanks very much for posting this example. can I ask a quick question tho…
is there a reason why the example shows white page background when resized yet the (wonderful) gotochina site does not? Even the rip off site that stole your code seem to not get the whitespace.
Thanks again
Steven
Thanks for the great tutorial, but it seems as though there is a problem with either IE7 or IE8. It works great for me in all browsers except IE7. When I then implement the change as suggested to Stephan (“Try to delete position: static; from #holder[id] div {} and you’ll see what I mean.”) it works in IE7, but not in IE8. Do you have a solution for this?
Hi all you guys, and thanks for the feedback! :) I’ll look into what I can do with IE, and post a revisited example as soon as time allows it. There have to be a solution for the iPhone also I guess, so that will be a fun challenge :
@Nathan: The white page background is due to the time between each interval that resizes the image. If you look at GOTOCHINA, the background image is resized using only CSS. This makes it 100% smooth, but the photos will only size up, not down. So for those who wish larger images for better quality or rely more on a good cropping, the pure CSS solution is not good enough. But I can post a pure CSS if you want to?
Hi Eirik,
My name is Matthew and I run http://www.theturninggate.net, where I produce web photo gallery templates for Adobe Lightroom. The GOTOCHINA site is very impressive, and, with your permission, I would love to create a Lightroom template based on your work. Please contact me if you would be willing to discuss this.
Cheers,
Matt
PS: @Steven: Download the update source-code and you problems will be fixed :)
[...] our last post about fullscreen scaling background without flash, we have received lots of feedback and suggestions for improvement. There has also been some [...]
News! Check out the new version based on mootools and implemented with the gallery functionality from GOTOCHINA and some extra options. The new version is posted at http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/
@Nathan – the script is somewhat modified now to resize as smooth as possible when working with javascript
@Steven: Do you have any problems in IE8 with the new version?
@Stephan: No, it isn’t iPhone-optimized yet – have to get one of those someday :) The scrolling bug you found in IE, can you explain further? I don’t have any problems scrolling in the new version at least.
@Everyone: Bug testing is welcome :)
Eirik, Thanks very much for getting back, if you can post the CSS version I would rather use that. I’ll look into the updated js in the mean time.
Good work, really liking the effect.
Daniel
Fantastic techique. Great work! . I am having some trouble though when the image loads up in the website. First I get a slightly bigger image covering the whole page and then the image I want imediately after. Its like a double effect. First an enlargement and then the original image. Any idea why this is happening? Thanks for your time and patience in advance. Keep up the good work!
@Everyone: Script updated at: http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/
@Nathan: Tryout the script at http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/ – that version is fully functional using pure css. But the script in the new version only applies javascript if needed so I would highly recommend including the script as well :)
@Daniel: Thanks! Try updating to the new script. If this doesn’t fix your problem, just drop us a mail with your source code and we’ll take a look at it :)
Daniel
Hello Eirik the new script did fix the problem I had thanks, but Internet explorer now shows a bar saying ” to help protect your security internet explorer stoped this page from executing scripts and Active X controls that could have access to the system.” I have noticed that this message does not appear in any of the websites you used the full screen technique while navigating on internet explorer. How did you do manage that? Your help would be much apreciated.
Igguana
This only happens when you are viewing the website offline (on your hard drive)
Very cool technique! I’ve used it on a hotel site for my company, thanks so much for posting this! One question – on the gotochina site, how do you have the tiled loading.gif load before the larger bg image?
@Matt: The loading-gif is just the background-image of the body :)
[...] invented fullscreen image scaling without flash for his GotoChina website (which is great, give it a visit!). I decided to play around with his [...]
This is soooooo cool!
Thank you for that!
[...] Fullscreen Image Scaling without Flash | Klipp og Lim | Blog. If you enjoyed this post, make sure you subscribe to my RSS [...]
This is exactly what I was working for; well written.
If for some reason you don’t want to use the new script (personally, i don’t want to have a reliance on mootools… here is a quick solution for the image appearing larger before the JS kicks in…
CSS:
#holder img { visibility:hidden;}
JS:
add before ” }
},300);
“;
if(img.style.visibility=’hidden’) {
img.style.visibility = ‘visible’;
}
Hope that’s useful to someone.
Rob
10x mate
I was looking for this from hours :o)