Question

我正在为Android和iOS做一个web应用程序我正在通过Javascript调整我的html文件中的每个对象但是有一个问题，第一张表是完美的但是当我把它复制下来时，第二张桌子的图像没有调整大小，你能帮帮我吗？

这是网站

http://bestparty.altervista.org/IOS/IOS/eventi.php

这是.JS文件

$(document).ready(function() {
  $("body").css("height", ((($(window).height() * 100) / 100)));
  $("#evntfoto").css("height", ((($(window).height() * 20) / 100)));
  $("#evntfoto").css("width", ((($(window).width() * 40) / 100)));



  document.ontouchstart = function(e) {
    e.preventDefault();
  };
});

这是我的html文件

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="True" name="HandheldFriendly">
    <meta content="on" http-equiv="cleartype">
    <link href="css/stile.css" rel="stylesheet" type="text/css">
    <meta content="width=320, initial-scale=0.7, user-scalable=no" name=
    "viewport">
    <script src="JS/jquery-1.11.1.js.js"></script><!--PER EVENTI-->

    <script src="JS/func.js"></script><!--PER EVENTI-->

    <title>BParty</title>
</head>

<body>
    <div id="navigation">
        <table width="100%">
            <tr valign="middle">
                <td align="center" valign="middle" width="25%">&lt;</td>

                <td align="center" valign="middle" width="50%">BPARTY</td>

                <td align="center" width="25%">&gt;</td>
            </tr>
        </table>
    </div>

    <div id="evntprg">
        EVENTI IN PROGRAMMA
    </div>

    <div id="container" style="overflow:scroll;">
        <div style=
        "width:90%; display:block; margin:0 auto; padding-top:10px; margin-top:10px; padding-left:10px; background-color:#FFF; padding-bottom:10px;">
        <table width="100%">
                <tr valign="middle">
                    <td align="center" id="evntfoto" style=
                    "background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
                    valign="middle"></td>

                    <td align="left" id="evnttxt" valign="top">&nbsp; &nbsp;
                    <b>Fnky carnival</b><br>
                    &nbsp; &nbsp; Sabato 21 Febbraio<br>
                    &nbsp; &nbsp; Nikita<br></td>
                </tr>
            </table>

            <table width="100%">
                <tr valign="middle">
                    <td align="center" id="evntfoto" style=
                    "background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
                    valign="middle"></td>

                    <td align="left" id="evnttxt" valign="top">&nbsp; &nbsp;
                    <b>Fnky carnival</b><br>
                    &nbsp; &nbsp; Sabato 21 Febbraio<br>
                    &nbsp; &nbsp; Nikita<br></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Answer 1

您正在使用ID。 HTML中的ID是唯一的，只有一个。

将HTML中的id="eventfoto"更改为class="eventfoto"。然后在jQuery中将您的选择器更改为$(".evntfoto").关于 HTML ID'S 的一些知识。您之所以使用类，是因为您可以在HTML页面上使用多个类。

Answer 2

将低于td的宽度更改为80％。

静态Html代码：

<td valign="middle" align="center" id="evntfoto" style="height: 119px; width: 80%; background-image: url(http://bestparty.altervista.org/IOS/IOS/IMG/fnky.jpg); background-size: cover; background-position: 50% 50%;">
                                        </td>

使用jquery的动态代码：

$("#evntfoto").css("width","80%");

JSS调整表格HTML上的图像

2 个答案: