使用asp.net web表单C#在运行时获取图像高度

本文关键字：运行时 获取 图像 高度 asp net web 表单 使用 | 更新日期: 2024-09-22 13:29:05

我正在使用asp.net web表单4.0，我正在尝试一些特别的东西。我正在使用css来设计图像的样式，这样它就可以适合任何类型的屏幕。在这个图像旁边，我将有2或3个div。我必须正确地设计它们。

  • 在两个图像的情况下，第一个div排列在大图像的顶部旁边，第二个div位于大图像的中间。

  • 在3个图像的情况下，第一个仍然位于顶部，第二个位于大图像高度的33%，第三个div位于大图像高的66%。

不幸的是，由于我使用css进行样式设计，我似乎找不到如何做到这一点。

我没有从数据库中获得图像，但只有源链接。然后，每当图像更改时，我都会覆盖源。

为了让你更清楚地了解它应该是什么样子：

BIG标签都是1个大图像

2个图像

BIG DIV
BIG
BIG DIV
BIG
BIG

3个图像

BIG DIV
BIG
BIG DIV
BIG
BIG DIV
BIG

我想做的是获得page_load中大图像的高度，然后使用这些信息在图像上加上页边空白。

不幸的是，我一点身高都没有。它总是一片空白。

我也可以尝试用jQuery来做这件事，但我认为用asp.net本身做这件事情可能会更好。

所以基本上我有两个问题：

  1. 你认为这是解决这个问题的正确方法吗
  2. 如果是：如何正确获取图像高度

如果你需要任何额外的信息，请告诉我。我会尽快添加。

编辑：根据要求，以下是我已经尝试过但失败的内容：

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

第2版：按要求提供aspx内容。

<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>

我还添加了css，这样你就可以更好地了解我目前拥有的内容：

/* 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;
}

使用asp.net web表单C#在运行时获取图像高度

您可以使用Jquery。我已经尝试过这个解决方案

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>

样式表：

.index1, .index2, .index3
{
    display:inline-block;
    position:absolute;
    width: 60%;
}
相关文章：