可調整大小的圖像按鈕或asp.net中的按鈕

我在C＃.NET中創建響應站點。我可以調整圖像大小，文字在div之內。但是，如果我嘗試在可調整大小的div中插入圖像按鈕或按鈕，它不會調整大小。我的代碼如下：可調整大小的圖像按鈕或asp.net中的按鈕

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Startscreen.aspx.vb" Inherits="Startscreen" %> 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>::: Eastvalley :::</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/font-resize.js"></script> 
    <link href="ProgramStyle.css" rel="stylesheet" type="text/css" /> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
    <style> 
     body 
     { 
      padding-top: 10%; 
      padding-bottom: 25%; 
     } 
     #resizable 
     { 
      max-width: 662px; 
      height: 50px; 
      margin: auto; 
     } 
    </style> 
    <script> 
     function fontResize() { 
      //Set default resolution and font size 
      var resolution = 1024; 
      var font = 20; 

      //Get window width 
      var width = $(window).width(); 

      //Set new font size 
      var newFont = font * (width/resolution); 
      $('body').css('font-size', newFont); 
     }; 

     $(document).ready(function() { 
      fontResize(); 
      $(window).bind('resize', function() { 
       fontResize(); 
      }); 
     } 
     ); 

     $(function() { 
      $("#resizable").resizable(); 
     }); 

    </script> 
</head> 
<body> 
    <form runat="server"> 
    <div id="resizable"> 
     <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" class="TableBorder" 
      style="background-color: #91e2ed"> 
      <tr> 
       <td align="left" valign="top"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
         <tr> 
          <td valign="top"> 
           <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
             <td> 
              <img src="images/InnerPageLogo.png" /> 
             </td> 
             <td> 
              Welcome to EastValley Water District 
             </td> 
            </tr> 
            <tr> 
             <td colspan="2" align="center" valign="middle"> 
              <asp:Label ID="lblLangugeSelection" runat="server" Text="Please select your language"></asp:Label> 
             </td> 
            </tr> 
            <tr> 
             <td colspan="2"> 
              &nbsp; 
             </td> 
            </tr> 
            <tr> 
             <td align="left" valign="middle"> 
              <div id="resizable"> 
               <asp:ImageButton ID="btnEnglish" ImageUrl="~/images/english.jpg" runat="server" CausesValidation="False" /></div> 
             </td> 
             <td align="right" valign="middle"> 
              <div id="resizable"> 
               <asp:ImageButton ID="btnSpanish" ImageUrl="~/images/Spanish.png" runat="server" /></div> 
             </td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html>

我使用的兩個圖像按鈕沒有調整大小。它看起來像這樣：

重新大小的瀏覽器之前：

enter image description here

重新大小的瀏覽器後：

enter image description here

請幫助。我需要創建一個image button或button，動態更改大小，在瀏覽器調整大小。

來源

2013-10-24 Farhan Mukadam

凡在調整大小功能，你嘗試調整按鈕？我只能看到你試圖調整字體大小。如果您想調整按鈕大小，您可能需要調整按鈕用作背景的圖像大小。 – bump

@Bump我把按鈕放在可調整的div中。但是這沒有幫助。你能幫助我的功能重新調整大小按鈕。我在網上找不到任何東西。 –

我會創建各種大小的不同圖像，然後根據窗口的寬度使用jQuery將'src'屬性設置爲指向較小的圖像，例如。你可以試試嗎？這個jQuery函數可以用來設置一個屬性：http://api.jquery.com/attr/。如果asp.net圖像按鈕沒有生成正確的html，則可以始終使用html輸入或按鈕標籤和圖像作爲背景。 – bump

首先，它似乎不可能使.net imageButton響應，因爲圖像都是服務器端開發的。只有HTML img元素有響應。在這個例子中顯示了一個解決方案。

我們在後臺代碼中使用圖像網址創建了一個img標籤，並且實際上用在後端代碼中生成的html代碼替換了「Label」元素。由於img標籤寬度必須爲100％，因此我們在div中設置了最大寬度。

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <title>Demo Responsive Image with asp.net</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

    <style> 
     img { 
      width: 100%; 
      height: auto; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div style="max-width: 500px;"> 
      <button id="button1" type="button" 
       onclick="window.location.href='https://www.w3schools.com/'"> 
      <asp:Label ID="myLabel" runat="server" /></button> 
     </div> 
    </form> 
</body> 
</html>

後端代碼：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

public partial class ResponsiveImage : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 

Label imageLabel = (Label)FindControl("myLabel"); 
imageLabel.Text = @"<img id='thisphoto' src='somephotoUrl'"; 
} 
}

來源

2017-02-22 17:50:43

可調整大小的圖像按鈕或asp.net中的按鈕

回答

相關問題