Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member Enforcefx's Avatar
    Join Date
    Sep 2011
    Location
    Sydney
    Posts
    21
    Member #
    29167
    How to make a HTML image, fit to browsers window size, then in the event of onclick i want the image go to 100%?

    When the page loads with just a single image on that page nothing else. I want to load that single image, so it fits to what ever browser window size they are using. then on click make it go 100%.

    How do you do this?

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,324
    Member #
    27709
    Liked
    764 times
    So I guess the obvious question here is. What have you tried yet ? To accomplish this ? You are aware there are hundreds of possible screen sizes and resolutions, thus resulting in as many different renderings of the same image, then you throw in mobile browsers.

    ???

  4. #3
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,443
    Member #
    20277
    Liked
    815 times
    http://buildinternet.com/2009/07/qui...r-window-size/

    I have a question, though - if the browser window opens bigger than the image, is the image supposed to stretch to fit? Or are all you images so ginormous that they will always be bigger than the window, in which case when they go to 100% there will be a lot of scrolling , both vertically and horizontally...
    Never argue with an idiot - they'll drag you down to their level and then beat you with experience.

    M.A. Bell

    http://digitalinsite.ca ~ my current site
    http://webmom.ca ~ my student blog
    http://floatleft.ca ~ my internship blog
    info@alphamare.ca

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #4
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    I don't even understand the question honestly.

  6. #5
    Junior Member Enforcefx's Avatar
    Join Date
    Sep 2011
    Location
    Sydney
    Posts
    21
    Member #
    29167
    Okay sorry for the confusing question, this is what i should have done from the start. Ref to the link i have provided
    http://hdbackground.com/wp-content/uploads/images-6.jpg

    Note when the the picture load its fits the browsers window.
    When you click the image it then goes to a the "actual size" of the image.

    How do i achieve this ?

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,324
    Member #
    27709
    Liked
    764 times
    It doesn't load full screen on my iPhone .... If it were to just fill the screen... It would look like a big blue egg... Sort of... Then when I rotate... It would have to stretch in the other direction...


    ???

  8. #7
    Junior Member Enforcefx's Avatar
    Join Date
    Sep 2011
    Location
    Sydney
    Posts
    21
    Member #
    29167
    Hmm okay if your on a mobile phone i am don't think you will understand what i am trying to achieve. I am guessing you will need to be a on a P.c to understand what i mean. But thank your for trying

  9. #8
    Member
    Join Date
    Nov 2011
    Posts
    50
    Member #
    30017
    Liked
    9 times
    I have a feeling this is what you're looking for? You click it, it goes 100%, then click again on the image it goes back to normal? Is that what you were looking for?

    So basically what i did, was get the width/height of the browser window, then make the image width/height that -20 (its a workaround deal with it). And then when the image fullsizes, it adds a class to it called test, and when this new class is clicked it makes it the height/width then removes the height/width. This is fixed with of the image, im sure you could find the actual image height/width.

    I'm sure I can find a way for it to get the actual height width of an image, so ill do it an update it for you.

    Code:
    <!doctype html>
    <html>
    <head>
    <title>Image to 100%</title>
    <style>
    * {
    padding: 0;
    margin: 0;
    }
    #imager {
    width: 100px;
    height: 100px;
    }
    </style>
    </head>
    <body>
    <div id="image">
    <img src="http://hdbackground.com/wp-content/uploads/images-6.jpg" alt="Image" id="imager"/>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var widWidth = $(window).width() - 5;
    var widHeight = $(window).height() - 5;
    $('#imager').css('width', widWidth+"px");
    $('#imager').css('height', widHeight+"px");
    });
    $('#imager').live('click', function(){
    $('#imager').css('width', '1920px');
    $('#imager').css('height', '1080px');
    $('#imager').addClass("test");
    });
    $('.test').live('click',function(){
    var widWidth = $(window).width() - 5; //WORKAROUNDS DURP im not sure why??
    var widHeight = $(window).height() - 5;
    $('#imager').css('width', widWidth+"px");
    $('#imager').css('height', widHeight+"px");
    $('#imager').removeClass("test");
    });
    </script>
    </body>
    </html>

  10. #9
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,403
    Member #
    28473
    Liked
    253 times
    Use this code it should do what you need it to without Jscript etc. and will work on all browser sizes except maybe cell phones:

    Code:
    body {
    margin:0;
    padding:0;
    background: url(../images/bg.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    }
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  11. #10
    Member
    Join Date
    Nov 2011
    Posts
    50
    Member #
    30017
    Liked
    9 times
    @m3n0tu18, the reason that I had to use jQuery because look at what he is trying to do.

    When the page loads with just a single image on that page nothing else. I want to load that single image, so it fits to what ever browser window size they are using. then on click make it go 100%.
    Yours just coveres the current browser window, and on click (which you need jQuery for) goes to the actual image size. This is what he is asking for, and what I gave him the code for. This cannot be accomplished with only CSS (at least not to my knowledge). But you do need jQuery to change height/widths.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css img fit window
,
css making an image the full width of browser
,

fit image to page html

,
fitting picture on screen code for html
,
html code fit image to screen
,
html image to fit browser
,
html picture fit to page
,
img fit to window
,
make an image fit to browser size
,

make html image fit browser

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:23 AM.
Powered by vBulletin® Version 4.2.0
Copyright © 2014 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com