Question

我正在C＃.NET中创建一个响应式网站。我可以在div内调整图像文本大小。但是，如果我尝试在可调整大小的div中插入图像按钮或按钮，则不会调整大小。我的代码如下：

<%@ 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。

asp.net中可调整大小的ImageButton或Button

0 个答案: