PDA

View Full Version : Resizing an image to a special size?



[Nicolas]
02-20-2011, 02:24 AM
Hi. I have some blank cards... I need an image to resize to fit it perfectly. Here's the image:
http://album.xipog.pisz.pl/image.php?twg_album=BLANKS%2FWodne&twg_show=basic_003.jpg
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.

Nile
02-20-2011, 04:08 AM
CSS would probably be the best idea for this. Make a div that looks something like this:


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:


<div class="basic_frame">
<img src="picture.jpg" />
</div>

[Nicolas]
02-20-2011, 04:48 AM
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.

Nile
02-20-2011, 05:23 AM
In that case, you can use the following 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

[Nicolas]
02-20-2011, 05:37 AM
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.

Nile
02-20-2011, 05:40 AM
Can I have a link, please?

[Nicolas]
02-20-2011, 05:46 AM
Yeah, sorry. http://dbanimefree.x10.mx/Epkmncrdgen.html

Nile
02-20-2011, 02:59 PM
This code won't work without the wrapping div, change your html to:


<div class="basic_frame">
<div class="frame"></div>
<img src="nothing.gif" />
</div>

coothead
02-20-2011, 03:44 PM
Hi there [Nicolas],

check out the attachment to see a working example. ;)

coothead

[Nicolas]
02-20-2011, 11:27 PM
Thanks guys! This'll work great! :)

coothead
02-20-2011, 11:34 PM
No problem, you're very welcome. ;)