Centering image within an iframe

[learning_brain]

For reference, try this link

http://www.qualityimagesearch.com/vi...p?img_id=41581

The image in the center has been placed in an iframe, for reasons I won't go into in detail here other than sites preventing hotlinking have difficulty if it's in a frame.

My problem is simple - centering! I have crawled the web trying to find a solution, but all efforts have failed.

1) css method - text-align: center - failed
2) inline css - also failed
3) auto left/right margin - failed
4) <center> tags wrapping iframe tag - failed
5) align=center attribute for iframe - failed


AArrrrggghhhh - why is this so hard? I take it the styling within a frame cannot be altered?

It's just a damn shame I can't just use <img src="">

Does anyone know of an include method... or any method?

[marshian]

Have you tried setting display: block and the auto margins?

[learning_brain]

Have you tried setting display: block and the auto margins?

That's one I haven't tried.... *Opens DW*

____EDIT________

Absolutely no difference. I've tried in header style and inline style.

[misson]

The document in an iframe is the same as the document you'd get when viewing the URL in a full tab/window. In the case of an image, the browser usually creates a minimal document which you have little control over.

The style cascade doesn't cross documents, so any style set in the containing document will have no affect on anything in the iframe. When the iframe URL is in the same domain as the containing document, you can inject CSS into this document. Otherwise, there's not much you can do.

One alternative is somehow to set the width of the iframe to the width of the image, then rely on iframe centering.

[essellar]

An admittedly expensive workaround would be to read the image at the server, base64-encode it, and include it in a data: URI, either as the src of an img or as the background-image of the framed page's CSS (with a background-attachment of center center and a background-repeat of no-repeat). If you've never used a data: URI before, it would look like this:

<img src="data:image/jpg;charset=utf-8;base64,base64-encoded_image_file_goes_here">

That gives you a lot of options, including serving the image directly on your page without incurring the HTTP_REFERER penalty, so you can do pretty much whatever you want at that point. It is bandwidth and computationally expensive, though, so it may not be practical in your situation (particularly if this needs to scale).

[learning_brain]

The document in an iframe is the same as the document you'd get when viewing the URL in a full tab/window. In the case of an image, the browser usually creates a minimal document which you have little control over.

The style cascade doesn't cross documents, so any style set in the containing document will have no affect on anything in the iframe. When the iframe URL is in the same domain as the containing document, you can inject CSS into this document. Otherwise, there's not much you can do.

One alternative is somehow to set the width of the iframe to the width of the image, then rely on iframe centering.

Thanks misson

I feared this was the case, but I like the idea of using the image width to create the iframe! My only problem here would be that most of the images are wider than I want the iframe to be, so I'll have to play with some limits or something to restrict the larger ones.

My first solution would have been to use framesets (simpler) but this causes lots of SEO problems.

An admittedly expensive workaround would be to read the image at the server, base64-encode it, and include it in a data: URI, either as the src of an img or as the background-image of the framed page's CSS (with a background-attachment of center center and a background-repeat of no-repeat). If you've never used a data: URI before, it would look like this:

<img src="data:image/jpg;charset=utf-8;base64,base64-encoded_image_file_goes_here">

That gives you a lot of options, including serving the image directly on your page without incurring the HTTP_REFERER penalty, so you can do pretty much whatever you want at that point. It is bandwidth and computationally expensive, though, so it may not be practical in your situation (particularly if this needs to scale).

This would have been an ideal solution except for the... expense! As the site references large images, this would be horrendous on my bandwidth. I also considered using the GD library to recreate the image, but this too would take more processing power and still leaves me with the bandwidth penalty.

I'm off to play with widths a bit!

[clairev]

This works for me.

<table height="100%" align="center" border="0" width="750">
<tr><td align="center" valign="middle">
<table border="0" style="text-align: Center" width="100%">
<tr><td>Centered</td></tr>
</table>
</td></tr>
</table>

[learning_brain]

This works for me.

<table height="100%" align="center" border="0" width="750">
<tr><td align="center" valign="middle">
<table border="0" style="text-align: Center" width="100%">
<tr><td>Centered</td></tr>
</table>
</td></tr>
</table>

Thanks Claire, but this doesn't use the iframe.

Yes, a table layout would work wonders but hotlinks from other sites are easily destroyed in tables or normal html. iframes are harder.

I have however now cracked it...!

And Claire, there is no way that is your true profile *or is it ;)*

<?php
            $maxWidth=728;
            $maxHeight= 410;
            
            $factor_hor = $maxWidth/$row_Image['WIDTH'];// factor required to reduce width to max width
            $testHeight = $row_Image['HEIGHT'] * $factor_hor; // resultant height
            
            $factor_ver = $maxHeight/$row_Image['HEIGHT'];    // factor required to reduce height to max height    
            $testWidth = $row_Image['WIDTH'] * $factor_ver; // resultant width
            
            if ($testHeight <= $maxHeight){//if the test height is suitable
                $newHeight = $testHeight;
                $newWidth = $row_Image['WIDTH'] * $factor_hor;
            } else {//else assume test width is suitable
                $newWidth = $testWidth;
                $newHeight = $row_Image['HEIGHT'] * $factor_ver;
            }
            
            ?>
        
            <iframe
                src="<?php echo $row_Image['IMAGEURL'];?>"
                style="width: <?php echo $newWidth;?>px; height: <?php echo $newHeight;?>px; border: 1px solid #ccc;"
            ></iframe>

[clairev]

Yes, that is me.

[learning_brain]

Hmm - not sure if the PM got through Claire as it may have been blocked... but thanks for the advice and your website is extremely..... inviting!