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

本文关键字：显示 浏览器 图像 ASP NET | 更新日期: 2023-09-27 18:13:39

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

我试着:

<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{高度:100%;宽度:100%;}

在这两种情况下，浏览器(IE9)都会用比浏览器高度大得多的高度拉伸图像，并显示一个右滚动条。

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

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

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

尝试设置

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

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

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

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

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

将此添加到aspx页面的body标签中:

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

在css中:

html,body 
{
    margin: 0; 
    padding: 0;
}
img
{
    position:absolute; 
    z-index:-1; 
    width:100%; 
    height:100%;
}
相关文章：