Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorwolcotter
    • CommentTimeMar 13th 2008 edited
     permalink
    To summarize:
    1) I desire to create a scaling image that maintains its aspect ratio as seen on the tanagram partners site here - http://www.tanagrampartners.com , the faux background image that is.
    2) I'm all about the win/win so I would like to offer a free t-shirt to the person who first comes up with the working code for this. Really. (Can you tell I need it in a hurry). Here's my t-shirt site - http://www.toghaus.com. Winner gets pick of the litter or a blank American Apparel shirt of your choice.

    Anyway, the image is at the bottom of the markup, not as a background image in the CSS. Clearly it has something to do with the percentage settings and the min-height settings for the aspect ratio. I've tinkered with a number of things but have yet to be able to get it to work.

    To make it easy, let me supply the image I'd like to scale. Here it is... http://toghaus.com/president/clouds.jpg

    I really don't mean to be cheesy with my offer. I just like to give back when I can. And in this case, I can.
    • CommentAuthorjacopsaj
    • CommentTimeMar 13th 2008 edited
     permalink
    In your HTML:
    <img id="background" src="images/clouds.jpg" alt="" />

    In your CSS:
    * {padding: 0; margin: 0;}
    #background{position:absolute; z-index:1; width:100%; height:100%;}

    No JS like tanagrampartners.com uses, but this is better because it works no matter what.

    I kinda feel like a jerk for asking for the shirt for something so simple, but I really like this one: http://www.toghaus.com/images/blueCart800.jpg And, hey, if you ever need a freelancer, drop me a line.
    andrew dot jacops at jtecheds dot com
    • CommentAuthorwolcotter
    • CommentTimeMar 13th 2008
     permalink
    Thanks for the quick reply jacopsaj. I do need it to maintain the aspect ratio with the scaling as seen on the tanagram site. Without trying I don't imagine that works with this solution, no?
    • CommentAuthordave_o
    • CommentTimeMar 13th 2008 edited
     permalink
    That's wright, jacopsaj's solution doesn't work properly, since the image is allways scaled to 100% width and height and therefore looses its aspect ratio.
    The following solution works in Opera, Firefox, Safari and Netscape. I couldn't test it in IE, since I use a Mac. I'm not sure, but I think, that IE 6 doesn't know the document.innerWidth/Height property, maybe someone else might know an alternative to get these values in IE. However the CSS is:

    #imgId {
    /* Set the width dynamically depending on the width of the browser window */
    width:100%;
    /* dont enlarge the image more, than its initial resolution */
    max-width:1000px;
    max-height:765px;
    /* Set the height dynamically depending on the image's current width, keeping the aspect ratio */
    height:auto;
    }

    This is a pure css solution. The disadvantage is, that the dimensions of the image are being set depending on either the browser window width (like in the example above) OR the browser window height (just swap all 'width's by 'height's (and vice versa) in the css declaration).

    If you don't fear to use javascript, than the following code snippet manages all for you. You should call it on the document.onload event (for initialisation purposes) as well as on the window.resize event (to adjust the image ratio obviously):

    function adjustRatio(img)
    {
    if(window.innerHeight < img.height)
    {
    img.style.height = '100%';
    img.style.width = 'auto';
    }
    else if(window.innerWidth < img.width)
    {
    img.style.width = '100%';
    img.style.height = 'auto';
    }
    }

    The parameter 'img' isn't the id of the image but rather the image object itself. For example a call of 'adjustRatio()' could look like this:

    adjustRatio(document.getElementById('theIdOfYourImage'));

    Let me know if it works in IE7. I'll look for an alternatvie attribute to window.innerWidth/Height meanwhile.

    Hope, I could help you,
    Dave.
    • CommentAuthordave_o
    • CommentTimeMar 13th 2008
     permalink
    OK, I haven't tested this yet, but the following should work in IE:

    Replace the lines

    window.innerHeight
    ...
    window.innerWidth

    in the javascript by

    document.body.clientHeight
    ...
    document.body.clientWidth

    Dave.
    • CommentAuthorwolcotter
    • CommentTimeMar 14th 2008
     permalink
    # dave_o, is there a chance you could post working examples of both the css and js methods you mention here, perhaps with this image - http://toghaus.com/president/cloud.html

    I would like to offer you a free shirt for your efforts as I greatly appreciate your input. Send me an email and I'll be happy to hook you up: 'ebkitt' - at - 'yahoo' dot com.

    Thanks again.
    • CommentAuthordave_o
    • CommentTimeMar 14th 2008
     permalink
    Of course I can,

    and here it is. Please don't forget to test it in IE, I've just build in the IE part.
    And thanks for the offer, but don't be silly, I have got enough shirts :) (However I'll remember you ;) )

    Dave.
    • CommentAuthorwolcotter
    • CommentTimeMar 14th 2008
     permalink
    Dave. I'm loving your input. Thanks so much. Couple of comments looking at this. In FF-MacOSX the scaling is inconsistent. Sometimes it scales correctly fullscreen, sometimes the image scales correctly in one direction - horizontally or vertically - but not the other, leaving a gap for the background to show through. Interestingly, in Safari it doesn't scale larger than the image itself. Looking at the one solution I've found that does work - tanagrampartners.com. The height of the image used for the pseudo background image is 800px. You'll note they use the following CSS parameters (which are less than the full size of the image - in this case 660px). This may be one of the keys in getting it to scale fullscreen always. (Note the min-height settings in the body tag and the #bg div). Thoughts?

    body {
    font-size: 62.5%; /*62.5% Sets 1em to 10px */
    text-align: center;
    color: #222;
    line-height: 1.6;
    min-height: 660px;
    margin: 0px;
    }
    body, html {
    height: 100%;
    background: black;
    }
    #bg {
    overflow:hidden;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 660px;
    }
    #bg img {
    visibility: hidden;
    }
    #bg .bgimg {
    position: relative;
    visibility: visible;
    left: 0;
    }
    • CommentAuthordave_o
    • CommentTimeMar 14th 2008 edited
     permalink
    What do you exactly mean by scaling to full screen? The following line prevents the image from scaling larger than its original dimensions:
    max-width:1000px;
    max-height:765px;
    You can outcomment them for testing puposes. The reason why the scaling in FF is a bit inconsitent lies in the implementation of the window.onresize event. In Safari for example, the function 'adjustRatio()' is called while actually resizing the window. In Firefox the function is first called, when the user resizED the window and stops moving the mouse. Unfortunately, I don't know any solution for this.

    Dave.
    • CommentAuthorwolcotter
    • CommentTimeMar 14th 2008
     permalink
    What I'm after is the scaling effect similar to what you see here on the tanagram site - http://www.tanagrampartners.com . You'll note that the "bg image" scales full-screen (maintaining aspect ratio) no matter the window size.

    Would it help to show the JS the guys at tanagrampartners.com use? It seems they've worked it out in a way that works across all appropriate browsers. I'm not so good with my JS so I'm I'm hampered in my ability to customize it.

    Anyway, here it is (compressed, unfortunately)...
    http://www.toghaus.com/president/resize.js

    Thanks again.
  1.  permalink
    I'm not sure I'm following this discussion accurately so maybe I'm missing something, but using width: 100% doesn't have to be 100% width of the browser window, it could also be 100% width of it's parent container. just a thought.
    • CommentAuthorninchenx
    • CommentTimeMay 12th 2008
     permalink
    Hi Dave_o,
    you have a solution for a problem I have, unfortunately I got my images in a flash gallery and the js doesn't work.
    Do you have an actionscript up your sleeve, perhaps? I did search the internet but tons of scripts are offered and more problems than resolutions.

    Thanks

    Ninchen
    • CommentAuthorgogogob
    • CommentTimeMay 12th 2008
     permalink
    My first thoughts about this problem are...

    <script>function ScaleBackground(){
    var ScreenHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
    var ScreenWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth ,
    imageWidth=1000, imageHeight=750;//actual image dimensions
    var scaleFactor=ScreenWidth/imageWidth; //just put actual image width here instead of variable, if you like
    Foo=new Image(); //create image
    Foo.src="sillypic.jpg"; // assign filename
    Foo.width=ScreenWidth+"px"; //match picture width to screen
    Foo.height=scaleFactor*imageHeight+"px"; //alter height by scaling proportion
    Foo.style.top=(ScreenHeight-(scaleFactor*imageHeight)/2)+"px"; //adjust vertical absolute position of image
    //(CSS should be:- #yourdivwrittenatstartofdoc{position:absolute;top:0;left:0}#yourdivwrittenatstartofdoc img{position:absolute})
    document.GetElementById("yourdivwrittenatstartofdoc").appendChild(Foo)}
    </script>

    This won't work as a simple script in the head, because the div isn't then defined; run it as function on window.onload; eg. window.onload=ScaleBackground;
    Hope that makes sense... (and I haven't b'xed)
    • CommentAuthordave_o
    • CommentTimeMay 12th 2008
     permalink
    @ninchenx
    I unfortunatelly don't. However js and as are very alike, can't you port the solition above for your purposes?

    @gogogob
    Your solution is pretty similar to mine. The problem is that the image won't neccessarily fill the full screen but can leave gasps on top and bottom - which wolcotter didn't want initially.

    Good Luck guys
    Dave
    • CommentAuthorsurruk51
    • CommentTimeMay 19th 2008
     permalink
    I was looking for a way of doing this and found the work you guys have done. I found that I had to make some alterations.
    1)I compared the aspect ratios of the image and the screen and set the 100%/auto according to which was larger.
    2)Instead of runnig adjust 'onload' which was unrelaibel for me I run it in a setTimeout at the end of the page. This seems to work reliably in IE and Firefox, but not in Safari (anyone know why, I am not a Safari expert)

    <html>
    <head>
    <title>Test resize</title>
    <style type="text/css">
    * { margin:0; padding:0; }
    #imgId {
    width:100%;
    max-width:1000px;
    max-height:765px;
    height:auto;
    }
    </style>
    </head>
    <body style='background-color:black;'>
    <img id="imgId" src="album/Bai Calligrapher Dali 1995.jpg" />
    <div id='info' style='position:absolute;left:2px;top:2px;'></div>
    <script type="text/javascript">
    var img = document.getElementById('imgId');
    window.onresize = function() {adjustRatio(img);}
    //document.onload = function(){ adjustRatio(img);}
    var imageratio = img.height / img.width;

    function adjustRatio(img)
    {
    var winheight = (document.body.clientHeight === undefined)?window.innerHeight:document.body.clientHeight;
    var winwidth = (document.body.clientWidth === undefined)?window.innerWidth:document.body.clientWidth;
    winratio = winheight / winwidth;

    if(winratio < imageratio)
    {
    img.style.height = '100%';
    img.style.width = 'auto';
    }
    else
    {
    img.style.width = '100%';
    img.style.height = 'auto';
    }
    }
    setTimeout("adjustRatio(img)",1);
    </script>
    </body>
    </html>
    • CommentAuthorgogogob
    • CommentTimeMay 19th 2008
     permalink
    Try my tip, above, for determining the viewport dimensions of all browsers.
    • CommentAuthorzack415
    • CommentTimeMay 20th 2008
     permalink
    How can I not find any other forums with advice on this subject?
    • CommentAuthorcolugo
    • CommentTimeJun 16th 2008
     permalink
    Check out this page that I created...It does not use the full screen, but everything scales and maintains its aspect ratio...it is pure css

    http://uhlan.ca
    • CommentAuthorcolugo
    • CommentTimeJun 16th 2008
     permalink
    also wolcotter, there is a plugin for firefox that will allow you to view the js code that you are trying to emulate
Add your comments
    Username Password
  • Format comments as (Help)