用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.comtopicasp-netanswers850635-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%;
}