制作面板图像适合于所有屏幕

Question

我有一个网页，其中包含面板里面三个组件（所有的ASP.NET控件）：

• textBox1的
• TextBox2中
• 提交按钮

而且，我正在使用图像作为面板的BackImage。该面板在不同的屏幕上看起来不一样。我尝试使用width=100，但它看起来像是裁剪了，我如何缩放面板图像以适应不同的屏幕分辨率？

下面的代码：

<asp:Panel ID="Panel2" runat="server" BackImageUrl="~/images/loginPanel4.jpg" width="100%" 
      CssClass="loginPanel"> 

    <asp:TextBox ID="TextBox1" runat="server" CssClass="loginUserNameText" ></asp:TextBox> 
    <asp:TextBox ID="TextBox2" runat="server" CssClass="loginPasswordText" TextMode="Password" ></asp:TextBox> 
    <asp:ImageButton ID="ImageButton1" runat="server" CssClass="loginButton" 
        ImageUrl="~/images/loginButton1.jpg" onclick="ImageButton1_Click" /> 
</asp:Panel> 

Answer 1

为了使您的面板和图像看起来是一样的，你将不得不使用相对大小及比例的背景图像不同的屏幕分辨率。

但是，除非您使用CSS3,，否则无法使用CSS来缩放背景图像。

还有其他几种解决方案。看看这个问题：Stretch and scale CSS background有帮助的建议。

希望这会有所帮助。

---

要清楚，我不知道任何ASP，所以我一直在假设的工作你的HTML输出与此类似：

<div ID="Panel2" style="width:100%;background-image: url(/images/loginPanel4.jpg);" class="loginPanel"> 
    <input ID="TextBox1" class="loginUserNameText" /> 
    <input ID="TextBox2" class="loginPasswordText" type="Password" /> 
    <input type="image" ID="ImageButton1" class="loginButton" src="~/images/loginButton1.jpg" onclick="ImageButton1_Click" /> 
</div>