Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question html - resize image due to screen size

    Hi all,

    how do I resize image due to screen size in html ?

    Please note, I got no support for ASP, SSI, PHP, CGI, Perl, Python, FastCGI, Miva, ColdFusion at this hosting.

    Thanks ahead!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    You need to be more specific about what you are trying to do. Media Queries: CSS3 Media Queries seem like an obvious choice but without some more detailed information, it's just a guess.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    harbingerOTV,

    I'll try to be more specific.
    Sorry if my request will be still not clear enough, I'm total newbie.

    So, I got site with one image in the center of web-page. User can switch on full-screen mode, in this case my image should change its height automatically to fill the whole screen.

    How do I perform it?
    Is it possible at all?

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    It would better if you could provide a link to a demo or your site. We need to see how you are accomplishing full screen and what the page displays in that mode.

    So is it possible? yes. How to do it though depends on a lot. Your code is really needed.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV View Post
    Your code is really needed.
    Please find my code below.

    As you can see in my css, I tried to play with "height: auto" and "max-width: 100%".
    My code doesn't do anything special in fullscreen mode yet.
    Please help me to resize on fullscreen mode my image mentioned in /img/IMG_1.JPG

    Thanks ahead.



    My css:

    body {
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    background: #202020 url(img/background/1.jpg);
    background-repeat: repeat-y
    background-size: cover;
    }

    #icons {
    max-width: 60%;
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: auto;
    height: auto;
    z-index: 8;
    transform: rotate(-57deg); -ms-transform: rotate(-57deg); -webkit-transform: rotate(-57deg); -moz-transform: rotate(-57deg);
    }

    #contact { float: left; cursor: pointer; }


    img { max-width: 100%; height: auto; }



    My html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <title>test title</title>
    <style type='text/css'>
    div {position:absolute;left:0px;top:0px;width:100%;height:100%;}
    </style>
    </head>
    <body>
    <h1>test</h1>
    <p>
    <img src = "/img/IMG_1.JPG" alt = "test alt" />
    </p>
    </body>
    </html>

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Any answer depends on how you want to accomplish going in to "full screen mode." If you just want a full screen image, you could one of these techniques: Perfect Full Page Background Image | CSS-Tricks
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Tags for this Thread

    Posting Permissions

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