title: Resizable ImageButton or Button in asp.net
body: <p>I'm creating a responsive site in C#.NET. I'm able to resize the images, text inside a <code>div</code>. But if i try to insert a image button or a button in that resizable div, it doesn't resize. My code is a follows:</p>
  
  <pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="Startscreen.aspx.vb" Inherits="Startscreen" %&gt;
  
  &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;::: Eastvalley :::&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/font-resize.js"&gt;&lt;/script&gt;
      &lt;link href="ProgramStyle.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="stylesheet.css" rel="stylesheet" type="text/css" /&gt;
      &lt;style&gt;
          body
          {
              padding-top: 10%;
              padding-bottom: 25%;
          }
          #resizable
          {
              max-width: 662px;
              height: 50px;
              margin: auto;
          }
      &lt;/style&gt;
      &lt;script&gt;
          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();
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form runat="server"&gt;
      &lt;div id="resizable"&gt;
          &lt;table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" class="TableBorder"
              style="background-color: #91e2ed"&gt;
              &lt;tr&gt;
                  &lt;td align="left" valign="top"&gt;
                      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                          &lt;tr&gt;
                              &lt;td valign="top"&gt;
                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;
                                              &lt;img src="images/InnerPageLogo.png" /&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                              Welcome to EastValley Water District
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td colspan="2" align="center" valign="middle"&gt;
                                              &lt;asp:Label ID="lblLangugeSelection" runat="server" Text="Please select your language"&gt;&lt;/asp:Label&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td colspan="2"&gt;
                                              &amp;nbsp;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td align="left" valign="middle"&gt;
                                              &lt;div id="resizable"&gt;
                                                  &lt;asp:ImageButton ID="btnEnglish" ImageUrl="~/images/english.jpg" runat="server" CausesValidation="False" /&gt;&lt;/div&gt;
                                          &lt;/td&gt;
                                          &lt;td align="right" valign="middle"&gt;
                                              &lt;div id="resizable"&gt;
                                                  &lt;asp:ImageButton ID="btnSpanish" ImageUrl="~/images/Spanish.png" runat="server" /&gt;&lt;/div&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The two image buttons that i have used are not resizing. Its looks like this: </p>
  
  <p>Before Re sizing browser:</p>
  
  <p><img src="https://i.stack.imgur.com/JW7hr.jpg" alt="enter image description here"></p>
  
  <p>After Re sizing browser:</p>
  
  <p><img src="https://i.stack.imgur.com/ozSaH.jpg" alt="enter image description here"></p>
  
  <p>Please help. I need to create an <code>image button</code> or a <code>button</code> that dynamically changes size, on browser resize.</p>