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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help Auto Ima

    Hello all, Im semi new to html coding, and have ran into a problem. Im trying to get a picture file to automatically fill up the webpage to the resolution of the persons computer viewing the website.

    I want the picture to resize to the screen resolution viewing it, and still look clear. Right now its either to big or to little for the 3 computers I have tried loading the site on.
    Heres my current code:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body>
    <img src="step1.jpg" width="1372" height="1536" alt=""/>
    </body>
    </html>


    Anyone kind enough to give me the coding that will fix this problem I would like to tip 10$ via paypal. Thanks!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Code:
    <img src="step1.jpg" id="fillscreen" width="1372" alt=""/>
    <script type="text/javascript">
    document.getElementById("fillscreen").style.width = screen.width+"px";
    </script>
    However that doesn't insure that the page is full width, or that the browser will let you resize the page.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Code:
    <img src="step1.jpg" id="fillscreen" width="1372" alt=""/>
    <script type="text/javascript">
    document.getElementById("fillscreen").style.width = screen.width+"px";
    </script>
    However that doesn't insure that the page is full width, or that the browser will let you resize the page.
    Thanks for the help, it fills the screen, only half the image is cut off, any idea?

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there furrycoat,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body{
        background-image:url(step1.jpg);
        background-attachment:fixed;
        background-size:100% 100%;
     }
    </style>
    
    </head>
    <body>
    
    </body>
    </html>
    ...or this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    html,body{
        height:100%;
        margin:0;
     }
    img {
        display:block;
        width:100%;
        height:100%;
     }
    </style>
    
    </head>
    <body>
    
    <img src="step1.jpg" alt="">
    
    </body>
    </html>

    coothead
    Last edited by coothead; 06-30-2013 at 09:41 AM.


  •  

    Posting Permissions

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