在 C# ASP.NET 中以全屏方式在瀏覽器中顯示圖像

Question

我想在瀏覽器頁面中顯示一個圖像並拉伸它以便它填充整個瀏覽器頁面。

我試過：

<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" Width="100%" Height="100%"></asp:Image>

並嘗試使用 css：

<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg"  CssClass="myimage1"></asp:Image>

並在 CSS 中：

.myimage1{height:100%;width:100%;}

在這兩種情況下，瀏覽器 (IE9) 都會以比瀏覽器高度大得多的高度拉伸圖像，並顯示右側滾動條。

如何將圖像拉伸到當前頁面大小的確切大小？

Answer 1

它拉伸到父容器的 100%，這可能太寬了。 嘗試設置 body 和 html 元素的寬度值。

嘗試設置

html, body { width: 100%; height: 100%; }

或者您可以先使用 jQuery 找出父元素的寬度，然后將圖像設置為該寬度。 無需為此使用 ASP 控件，只需使用 CSS 和 jquery。

$newheight = $('#yourimageid').parent().height();
$('#yourimageid').css('height', $newheight);

這將獲取父元素的高度，然后將該值附加到 css 高度值

Answer 2

在 body 標簽內的 aspx 頁面中添加以下內容：

<img src="Styles/mypic.jpg" alt="" />

在CSS中：

html,body 
{
    margin: 0; 
    padding: 0;
}

img
{
    position:absolute; 
    z-index:-1; 
    width:100%; 
    height:100%;
}