JSS 在表格 HTML 上调整图像大小答案

【问题标题】：JSS resize images on table HTMLJSS 在表格 HTML 上调整图像大小
【发布时间】：2015-03-05 19:26:01
【问题描述】：

我正在为 android 和 iOS 做一个 webapplication 我正在通过 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>

【问题讨论】：

标签： javascript android html css web-applications

【解决方案1】：

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

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

【讨论】：

【解决方案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%");

【讨论】：