在 C# ASP.NET 中全屏显示浏览器中的图像答案

【问题标题】：Show image in browser in full screen in C# ASP.NET在 C# ASP.NET 中全屏显示浏览器中的图像
【发布时间】：2020-04-23 14:51:37
【问题描述】：

我想在浏览器页面中显示一个图像并将其拉伸以填满整个浏览器页面。

我试过了：

<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) 都会以比浏览器高度大得多的高度拉伸图像，并显示右侧滚动条。

如何将图像拉伸到当前页面大小的确切大小？

【问题讨论】：

【解决方案1】：

它拉伸到父容器的 100%，这可能太宽了。尝试设置 body 和 html 元素的宽度值。

尝试设置

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

或者您可以使用 jQuery 首先找出父元素的宽度，然后将图像设置为该宽度。无需使用 ASP 控件，只需 CSS 和 jquery。

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

这将抓取父元素的高度，然后将该值附加到css高度值

【讨论】：

【解决方案2】：

在正文标签内的 aspx 页面中添加这个：

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

在css中：

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

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

【讨论】：