Question

这是最简单的代码，不起作用。为什么不能在移动设备上调整大小？

欢呼

我一直在想，它不知道将100％与之相关的原因（因为我使用的桌子使它在垂直和水平方向上居中对齐），我仍然无法正常工作。

（HTML）

html,
body,
#wrapper {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

#wrapper td {
  vertical-align: middle;
  text-align: center;
}

<body>
  <table id="wrapper">
    <tr>
      <td><img src="logo.png" max-width="100%"></td>
    </tr>
  </table>
</body>

Answer 1

也许是这样的：

div {
  display:flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content:center;
}
div > img {
  max-width: 100%;
}

<div>
  <img src="https://dummyimage.com/600x400/000/fff.png">
</div>

JSFiddle

Answer 2

如果您使用的是表格，则此响应式CSS会起作用

/* full view of browser */
html, body {
   width: 100%;
   height: 100%;
   margin: 0;
}
/* table full width and no overflow */
#wrapper {
   width: 100%;
   max-width: 100%;
   overflow: hidden;
   border-spacing: 0;
   border-collapse: collapse;
}
/* table datacell also full width */
#wrapper td {
   width: 100%;
   padding: 0;
   vertical-align: middle;
   text-align: center;
}
/* image keeps aspect ratio */
#wrapper img {
   width: 100%;
   height: auto;
   border: 0;
}

（简单）最大宽度：100％不适用于img（在移动设备上），请参见代码

2 个答案: