html - 将表格转换为 AutoResize Div

Question

目前我正在使用表格以相同大小的 block 显示 4 个摄像头:左上角/右上角/左下角/右下角。我想切换到 div，有可能事情会更自动化一些。

这是我的:

<table border="">
   <tr>
      <td>
      <object id="Player1" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.65/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
      <td>
      <object id="Player2" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.67/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
   </tr>
   <tr>
      <td>
      <object id="Player3" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.70/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
      <td>
      <object id="Player3" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.12/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
   </tr>
</table>

我想改用 div。我环顾了堆叠的 div，似乎我可以有一个容器来指定整个宽度。在这种情况下，它可能是 1080 或 720 电视屏幕。是否可以让 4 个 div 在可用空间量中达到最大值，并自动执行或通过指定宽度来执行。

我的问题是:是否能够根据屏幕尺寸或容器宽度自动调整对象行中的高度和宽度？而且它也硬编码在 url 中。

编辑:http://10.77.130.12/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10(宽度/高度在那里硬编码)以及对象行.保持硬编码我确信我可以将东西转换为 div。但是让它们根据窗口大小自动调整大小并与视频对象交互是我不确定的。如果这可能的话。

Answer 1

您可以使用 % 作为宽度和高度，进行相应的计算，它会适合您的布局/视口(viewport)...

父 div(表格)的宽度为:100%