(简单)最大宽度:100% 不适用于 img(在移动设备上),请参阅代码

约翰·克拉格贝克

这是最简单的代码,不起作用。为什么它不会在移动设备上调整大小?

干杯

我在想它不知道将 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>

来源

如果您使用的是表格,则此响应式 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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章