1

我正在 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>

我使用的两个图像按钮没有调整大小。它看起来像这样：

在调整浏览器大小之前：

在此处输入图像描述

调整浏览器大小后：

在此处输入图像描述

请帮忙。我需要在浏览器调整大小时创建一个image button或一个button动态改变大小的。

4

1 回答 1

0

首先，似乎不可能使 .net imageButton 响应，因为图像都是在服务器端开发的。只有 HTML img 元素是响应式的。此示例中显示了一种解决方案。

我们在后端代码中创建一个带有图像网址的 img 标签，并且实际上将“Label”元素替换为后端代码中生成的 html 代码。由于 img 标签的宽度必须为 100%，我们在 div 中设置了一个 max-width。

<!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-22T17:50:43.137 回答