Best way to use CSS Clip

[koneill]

All,

I'm wondering if their is a way to use the CSS clip to place my image propational within another image.

In this case - I am giving users the ability to upload their own image:

As an example - this URL shows the uploaded image:

http://www.pinkcloud.com/custom_clock/submit.php?upload_message=image uploaded&upload_message_type=success&show_image=kmo_mikeg.jpg

Here are the div tags and CSS clip - I'm using to size the uploaded image into the other image - however no matter what I do the
image doesn't go into the other image and the proportians are off:

<div id="layer1" style="width:400px; height:300px; margin:auto; position:relative; z-index:-1; align:center;">
    <img name="imgSrc" id="imgSrc">
    <div id="layer2" style="position:absolute; clip: rect(0px,85px,275px,0px);top:65px; left:108px;z-index:2"/>
    <img src="images/kmo_mikeg.jpg" width="141" height=303"/><br/>
</div>

I'm wondering if I need to use a JavaScript function someone per the below to be called to somehow dynamically correct and fit the CSS rect clip into the other image?

function clipy()
{
    document.getElementById("layer2").style.clip="rect(0px,100px,275px,0px)";
}

Any examples or snippets of how to best do this would be great.

[mattster]

Yes you can use javascript to do it, and your syntax is correct.

Or you can apply CSS direct to an image, like this:

img.clip {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

Either one would work, depending exactly how you'd like to apply it. Personally I'd use CSS, unless you have to change the clip sizes for each image.

But as you're trying to set propotions from a user-uploaded image, maybe not a good idea to use clip, as they might think the image has uploaded wrong and throw a fit. Try looking at alternate methods, such as height/width, positioning, scaling etc etc.

Note: Avoid inline styles, use a CSS stylesheet instead. Make your code consistant, either close the <img> or don't (depending if you're HTML5 or not). Just for future note, you cannot self close a <div>, it needs to be: <div><img></div>. This may be what's causing you a problem.