Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Resizing an image to a special size?

  1. #1
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default Resizing an image to a special size?

    Hi. I have some blank cards... I need an image to resize to fit it perfectly. Here's the image:

    The white space is where an image needs to go. Should or could I do this in JS? Or should this be in CSS? I'm hoping for JS though... But anything is fine.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    CSS would probably be the best idea for this. Make a div that looks something like this:
    Code:
    div.basic_frame {
       background: url(basic_003.jpg) no-repeat;
       width: 362px;
       height: 499px;
       position: relative;
    }
    div.basic_frame img {
       position: absolute;
       top: 63px;
       left: 41px;
    }
    And then html:
    HTML Code:
    <div class="basic_frame">
       <img src="picture.jpg" />
    </div>
    Jeremy | jfein.net

  3. #3
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default

    It won't work... I try adding a different image and it doesn't work. I need it to curve like in the image.
    EDIT: And btw, can this be moved to the CSS part of the forum? I don't know how. Sorry.

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    In that case, you can use the following code:
    HTML Code:
    <style>
    div.basic_frame {
       position: relative;
       width: 362px;
       height: 499px;
    }
    div.basic_frame div.frame {
       background: url(basic_003.jpg) no-repeat;
       width: 362px;
       height: 499px;
       position: relative;
       z-index: 2;
    }
    div.basic_frame img {
       position: absolute;
       top: 63px;
       left: 41px;
       z-index: 1;
    }
    </style>
    <div class="basic_frame">
    	<div class="frame"></div>
       <img src="image.jpg" />
    </div>
    But you have to make the blank space of basic_003.jpg transparent
    Jeremy | jfein.net

  5. #5
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default

    No, it doesn't work either
    It just comes up with the image, not the template.
    I made it transparent in Paint.NET and saved it as a gif and changed the CSS bg url to the new image, and it still won't work.

  6. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can I have a link, please?
    Jeremy | jfein.net

  7. #7
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

  8. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    This code won't work without the wrapping div, change your html to:
    Code:
    <div class="basic_frame">
    	<div class="frame"></div>
       <img src="nothing.gif" />
    </div>
    Jeremy | jfein.net

  9. The Following User Says Thank You to Nile For This Useful Post:

    [Nicolas] (02-20-2011)

  10. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there [Nicolas],

    check out the attachment to see a working example.

    coothead

  11. The Following User Says Thank You to coothead For This Useful Post:

    [Nicolas] (02-20-2011)

  12. #10
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default

    Thanks guys! This'll work great!
    Daba! The Fantage-like website
    Virtual World in progress.
    Out of pure HTML, Javascript, and CSS. Oh, and poorly done Paint images.

Bookmarks

Posting Permissions

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