Question

我试图制作填充窗口的图像表。

以下是我的完整资料来源：

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>ready</title>
  <style type="text/css">
    html,
    body {
      min-width: 2048px;
      height: 100%;
    }
    .player_buttons {
      table-layout: fixed;
      height: 100%;
      width: 100%;
    }
    .playerimg img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <table class="player_buttons">
    <tr class="team" id="team_A">
      <td class="playerimg">
        <img src="../assets/profiles/1.jpg" />
      </td>
      <td class="playerimg">
        <img src="../assets/profiles/2.png" />
      </td>
      <td class="playerimg">
        <img src="../assets/profiles/3.jpg" />
      </td>
    </tr>
    <tr class="team" id="team_B">
      <td class="playerimg">
        <img src="../assets/profiles/4.jpg" />
      </td>
      <td class="playerimg">
        <img src="../assets/profiles/5.jpg" />
      </td>
      <td class="playerimg">
        <img src="../assets/profiles/6.jpg" />
      </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

当图像足够小时，这是工作，但是在图像大小的情况下，table（= .player_buttons）会忽略它的高度（它超过正文和HTML的高度）。

我认为图像保持其方面和最小尺寸是问题。如何将图像调整为单元格大小？

感谢。

ADD。

.playerimg img {height: 500px;}

- ＆GT;它有效（但我不想将高度设置为500px）

.playerimg img {height: 10%;}

- ＆GT;忽略身高。

Answer 1

You are offline but this is the first time you are building this
application with this configuration. You must be online once with
this build configuration and then you can do subsequent builds
offline

由于您希望在浏览器窗口中显示图像，因此vh是一个不错的选择。此代码没有响应，但我希望它是您正在寻找的。

Answer 2

我想建议您不要将min-width作为2048px身体，因为它在某些屏幕中跨越更多区域，而应使用min-width作为{{1}如果完全适合每个屏幕，也会在100%标记中使用max-width和max-height属性，这样图像的高度就不会溢出。只需将以下代码粘贴到您的img标记而不是您的代码。

<style></style>

我希望它有所帮助。评论进一步查询

将图像大小调整为其表格上的父div

2 个答案: