在 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

我找到了使用 img html 标签并使用 CSS 的解决方案：
http://bytes.com/topic/ asp-net/answers/850635-how-stretch-background-image-fill

将其添加到 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%;
}