Get image height on runtime with asp.net web forms C#

Question

I'm working with asp.net web forms 4.0 and I'm trying something special. I'm using css to style an image so it will fit on any kind of screen. Next to this image I will have 2 or 3 divs. I have to style them properly.

• In the case of 2 images, the first div is aligned next to the top of the big image and the second div is located halfway of the big image.

• In case of 3 images, the first is still at the top, the second is at 33% of the big image height and the third div is at 66% of the big image height.

Unfortunately because I style with css, I can't seem to find how to do this.

I don't get the image from the DB, but only the source link. I then override the source everytime the image changes.

To give you a clearer view of how it should look :

The BIG tags are all 1 big image

2 images

BIG DIV
BIG
BIG DIV
BIG
BIG

3 images

BIG DIV
BIG
BIG DIV
BIG
BIG DIV
BIG

What I was thinking of doing was to get the height of the big image in the page_load and then use that information to put a margin-top on the images.

Unfortunately I can't get any height at all. It's always blank.

I could also try and do this with jQuery, but I thought it might be better to do this with the asp.net itself.

So basically I have 2 questions :

1. Do you think this is the right approach to tackle the problem?
2. If yes: how could I get the image height properly

If you need any extra info, just let me know. I'll add it asap.

EDIT: as requested, here is what I have already tried and failed:

int pageHeigth = int.Parse(ImagePage.Height.Value.ToString());
int pageHeigth = int.Parse(ImagePage.Attributes["height"].ToString());

EDIT2: as requested the aspx content.

<div class="pageContent">
        <div id="BigImage" runat="server" class="bigImage">
            <asp:Image ID="ImagePage" class="imagePage" runat="server" AlternateText="Page image not found"                
                src="" />
        </div>
        <div class="indexImages">
            <div id="Index1" runat="server" class="index1">
                <asp:Image ID="ImageIndex1" runat="server" 
                    AlternateText="Index image not found" 
                    src=""/>
                <asp:TextBox ID="TextBoxIndex1" runat="server" />
                <div class="indexButtons">
                    <asp:Button ID="ButtonOK" runat="server" Text="Quality Control OK" 
                        onclick="ButtonOK_Click"></asp:Button>
                    <asp:Button ID="ButtonIncorrect" runat="server" Text="Incorrect Index" 
                        onclick="ButtonIncorrect_Click"></asp:Button>
                </div>
            </div>
            <div id="Index2" runat="server" class="index2">
                <asp:Image ID="ImageIndex2" runat="server" 
                    AlternateText="Index image not found" 
                    src=""/>
                <asp:TextBox ID="TextBoxIndex2" runat="server" />
                <div class="indexButtons">
                    <asp:Button ID="ButtonOK2" runat="server" Text="Quality Control OK" 
                        onclick="ButtonOK2_Click"></asp:Button>
                    <asp:Button ID="ButtonIncorrect2" runat="server" Text="Incorrect Index" 
                        onclick="ButtonIncorrect2_Click"></asp:Button>
                </div>
            </div>
            <div id="Index3" runat="server" class="index3">
                <asp:Image ID="ImageIndex3" runat="server" 
                    AlternateText="Index image not found" 
                    src=""/>
                <asp:TextBox ID="TextBoxIndex3" runat="server" />
                <div class="indexButtons">
                    <asp:Button ID="ButtonOK3" runat="server" Text="Quality Control OK" 
                        onclick="ButtonOK3_Click"></asp:Button>
                    <asp:Button ID="ButtonIncorrect3" runat="server" Text="Incorrect Index" 
                        onclick="ButtonIncorrect3_Click"></asp:Button>
                </div>
            </div>
        </div>
    </div>

I'm also adding the css with them so you might have a better view of what I have so far:

/* Page image */
.bigImage 
{
    height: 80%;
    float: left;
    width: 40%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.imagePage
{
    height: 100%;
}


/* Index images */

.indexImages input[type=text]
{
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
}

.index1, .index2, .index3
{
    display: inline-block;
    width: 60%;
}

.index1 input, .index2 input, .index3 input
{
    vertical-align: top;
}

.index1 img, .index2 img, .index3 img
{
    vertical-align: top;
    width: 40%;
    margin-left: 5%;
}

.indexButtons
{
    display: inline-block;
    width: 150px;
}

.indexButtons input
{
    width: 150px;
    margin: 0 0 5px 0;
}

Answer 1

You can use Jquery for this .I have tried this solution

JavaScript:

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var img = document.getElementById("<%=ImagePage.ClientID%>");
            var mainheight = img.height;

            $(".index1").css('top', img.offsetTop + "px");
            $(".index2").css('top', (img.offsetTop + (mainheight / 3)) + "px");
            $(".index3").css('top', (img.offsetTop + ( (2 * mainheight)/3)) + "px");
        });
    </script>

Style sheet:

.index1, .index2, .index3
{
    display:inline-block;
    position:absolute;
    width: 60%;
}