Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

How to make a HTML image, fit to browsers window size, then in the event of onclick .....

Discussion in 'HTML and CSS Help' started by Enforcefx, Nov 13, 2011.

  1. Offline

    Enforcefx New Member

    Message Count:
    21
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    Sydney
    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?


    Enforcefx, Nov 13, 2011
    #1

  2. WDF Go Premium, Drop Ads

  3. Online

    Webzarus Well-Known Member

    Message Count:
    3,003
    Likes Received:
    666
    Trophy Points:
    113
    Gender:
    Male
    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.

    ???


    Webzarus, Nov 14, 2011
    #2
  4. Online

    AlphaMare WDF Moderator

    Message Count:
    3,970
    Likes Received:
    720
    Trophy Points:
    113
    Gender:
    Female
    Location:
    Montreal, Canada


    AlphaMare, Nov 14, 2011
    #3
  5. Offline

    MHometchko Member

    Message Count:
    106
    Likes Received:
    18
    Trophy Points:
    18
    Gender:
    Male
    I don't even understand the question honestly.


    MHometchko, Nov 18, 2011
    #4
  6. Offline

    Enforcefx New Member

    Message Count:
    21
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    Sydney
    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 ?


    Enforcefx, Nov 18, 2011
    #5
  7. Online

    Webzarus Well-Known Member

    Message Count:
    3,003
    Likes Received:
    666
    Trophy Points:
    113
    Gender:
    Male
    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...


    ???


    Webzarus, Nov 18, 2011
    #6
  8. Offline

    Enforcefx New Member

    Message Count:
    21
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    Sydney
    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 :)


    Enforcefx, Nov 20, 2011
    #7
  9. Offline

    mafiya Member

    Message Count:
    50
    Likes Received:
    9
    Trophy Points:
    8
    Gender:
    Male
    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>


    mafiya, Nov 25, 2011
    #8
  10. Offline

    m3n0tu18 WDF Moderator and Drupalite!

    Message Count:
    1,373
    Likes Received:
    248
    Trophy Points:
    63
    Gender:
    Male
    Location:
    New York
    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;
}


    m3n0tu18, Nov 25, 2011
    #9
  11. Offline

    mafiya Member

    Message Count:
    50
    Likes Received:
    9
    Trophy Points:
    8
    Gender:
    Male
    @m3n0tu18, the reason that I had to use jQuery because look at what he is trying to do.

    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.


    mafiya, Nov 26, 2011
    #10
(You have insufficient privileges to reply here.)

Share This Page