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 9 of 9

Thread: large images

  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Smile large images

    Hey is there a way the display an image on a website that's wider than like 1280 and have the browser adjust it without having to scroll right or up and down? For instance in a container.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    What do you mean, have the browser 'adjust it'? Adjust by what means? Scale or position?

    To scale an image, you can use img {height:--px; width:--px;} in your CSS or <img height="-" width="-"> in your markup.

    That's for specific sizes, in which case you would usually just resize your image in Photoshop etc. You can also use percentage scaling so instead of using the px measurement, you can make the image a certain % of the screen size or, in your case, a % of the container.

    Does that help at all?

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    no i mean a picture that's say 1700 pixels wide, then when displayed on a 1280x1024 monitor or laptop you don't have to scroll right to see it all. could i just center it?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think you would have to resize the image to a smaller res, make sure its in a format that doesnt degrade when it is stretched then do what Dr said...set width and height to 100%. so whatever screen resolution its in it will fit the entire screen. Provided its not in a div container that will constrain it.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    That's right. If you set both it's width and height dimensions to 100%, it should stretch. You can position it center with margin:0 auto;.

    It would be more helpful to us (and in turn to you) if you could go into more detail about the purpose of this image. Assuming it's a background, there will be some div background styling attributes to learn - and even then, we don't know if you're using tables or CSS for positioning in your site.

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Dr Varney...off topic, but are you also over at daniweb forums? there is a Varnius there. lol

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I'm either Dr_ Varney or simply Varney on all forums I use. I've never used the name 'Varnius'.

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Repatilian, I'm struggling with a similar issue at the moment, came across something and wondered if this article would be of any use to you?

    Regards

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    i'm using css. i have one picture that has my logo and background in it. that third attempt on the website looks like the best. here's a good site i found in the comments. http://www.younic.de/scaling-body-ba...-with-pure-css.


  •  

    Posting Permissions

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