Kepler,
Looks like you got right down to the nuts and bolts. Honestly, you
may have inadvertently isolated the nerve of my problem. I was lost in
attempting the use of z-index with absolute positioning. After a few
vain attempts at adjusting the top and left to bring the image&overlay
within the portion marked "CONTENT GOES HERE", I figured I'd have
better luck finding a way to scale an image within a table. Hence the
misleading initial posts !
I'd have to agree on the thumbnailing during ingestion vs.
post-asset-fetch being the better approach. It reduces transfer load
on the response objects and several other inherent delays. However,
the current approach is more for prototyping purposes as well as
settling an off-topic pending point.
Could you show me how to correctly position the image & overlay in
the content-reserved portion in my example.
Thanks,
Matt
On 8/1/07, Kepler Gelotte <[EMAIL PROTECTED]> wrote:
>
>
>
> > My dilemna was and still is to autofit an image of any size (entire image
> should be viewable) within the table's background image property using the
> style attribute. This "table" is currently no more than roughly 100 pixels
> on either side.
>
>
>
>
> Hi Matt,
>
>
>
> Here is a sample mockup I created using an overlay technique. Substitute the
> table for the div in your case. A better approach may be to resize the image
> on the server when the user uploads it using the GD2 library. I used the
> image resizing and cropping facilities for my home grown CMS.
>
>
>
> <html>
>
> <head>
>
> <style>
>
>
> img.stretch {
>
>
> width:
> 500px;
>
>
>
> height: 300px;
>
>
>
> z-index: -1;
>
>
>
> position: absolute;
>
>
> top:
> 50;
>
>
> left:
> 50;
>
>
> }
>
>
>
>
> div.overlay {
>
>
> width:
> 500px;
>
>
>
> height: 300px;
>
>
>
> z-index: 1;
>
>
>
> position: absolute;
>
>
> top:
> 50;
>
>
> left:
> 50;
>
>
> }
>
> </style>
>
> </head>
>
> <body>
>
> <div
> class="overlay">Here is some text</div>
>
> <img
> src="logo.jpg" class="stretch" />
>
> </body>
>
> </html>
>
>
>
>
>
> Best of luck,
>
> Kepler Gelotte
>
> *******************************************************************
> List Guidelines:
> http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe:
> http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
