Javascript JSS调整HTML表上的图像大小_Javascript_Android_Html_Css_Web Applications

Javascript JSS调整HTML表上的图像大小

javascript android html css web-applications

Javascript JSS调整HTML表上的图像大小,javascript,android,html,css,web-applications,Javascript,Android,Html,Css,Web Applications,我正在做一个android和iOS的网络应用程序我正在通过Javascript调整html文件中每个对象的大小但有个问题，第一张桌子很完美但是当我把它复制下来时，第二张桌子的图像没有调整大小，你能帮我吗这是网站这是一个.JS文件 $(document).ready(function() { $("body").css("height", ((($(window).height() * 100) / 100))); $("#evntfoto").css("height", ((

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

这是网站

这是一个.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>


B党
B党
程序中的事件
Fnky狂欢节

萨巴托2月21日

尼基塔

Fnky狂欢节

萨巴托2月21日

尼基塔

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

将HTML中的

id=“eventfoto”

更改为

class=“eventfoto”

。然后在jQuery中将选择器更改为

$（“.evntfoto”）。

关于的一些知识。之所以要使用类，是因为可以在HTML页面上使用多个类

低于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>

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