How Come This <Object> Won't Size Automatically?

I'm working on a landing page for the network of sites I'm pulling together. Decided to make the landing page a forum, just for extra content and engagement. So I've installed a Simple Machines forum, viewable here: http://stephenbrennan.ca/badmanfusion/index.php

To get the landing page functionality I was looking for, I added an object tag in the SMF theme file that pulls from a small external HTML file. The tag is set up as follows:

<object type="text/html" style="width: 100%; height: 820px;" data="http://stephenbrennan.ca/BadManFusionLanding.htm"></object>​

The code of the external file is pretty basic thus far:

<style type="text/css">

#landingHeader {

    width: 100%;
    height: 100%;         
}

#landingHeaderImage {
    max-width: 100%;
    height: auto;
    margin: auto;
    display: block;
}

</style>

<div id="landingHeader">
                <img alt="" id="landingHeaderImage" src="Link_Header.jpg" width="1200" height="675">
             
</div>

Code (markup):

The header image resizes itself automatically. But I found that if I don't set the object tag height (820px) the object area crops itself to like 1/3 of the image height. Tried setting the height to 100% or auto but it doesn't seem to make a difference.

I'd be content to leave the height manually set, but when I view the page in a minimized browser, or on my phone, that 820px results in a large white gap between the image and the forum block. Anyone know why the object tag insists on eating itself?

 

Hi there Captain_Ambiguo,

why don't you do away with the "object element" altogether
and just use the "img element" in it's stead?

This CSS...

#landingHeaderImage {
    width: 98.6%;
    height: auto;
    margin: 0.6em auto;
    display: block;
 }

Code (markup):

...would suffice.
​

coothead

 

I could, but I'll likely be adding a few more elements to the header....actually maybe I can just paste the whole div in there and ditch the object as you suggest. I'll give that a shot. I don't really like php.

 

uhm... because objects and iframes don't size automatically?

NOT that you should be using either... though really that MASSIVE space wasting image you seem to be slopping in isn't going to win any friends amongst visitors to a FORUMS. Sucking down an entire screen full of NOTHING shoving the CONTENT -- aka the part people are actually coming to your forums far -- COMPLETELY off the bottom of the screen even at 1080p?

Way to make sure NOBODY wants to use your forums!

 

.....landing page......

 

In other words a splash page, something we've been told for TWENTY DAMNED YEARS to stop doing! It only pisses off visitors. Put a cute little logo in the corner and use the rest of the screen FIRST damned time they get to your site for the CONTENT!!!

Anything else is artsy-fartsy bull that is GUARANTEED to make you /fail/ -- no matter how many marketing types and "artists" under the DELUSION that they know the first thing about design might cream their panties over it. That stuff stopped impressing people or drawing audiences almost as soon as it was introduced DECADES ago and that it's slowly creeping back into sites is NOT a good thing.

People do not visit a forums for some artsy fartsy nonsensical image garbage -- they visit for the CONTENT, so your job in building a site is to get that content to them as quickly and cleanly as possible. Anything else is artsy-fartsy hoodoo-voodoo flash-over-substance bullcookies!