html - (简单) max-width : 100% not working for img (on mobile), 看代码

标签 html css image

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

干杯

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

关于html - (简单) max-width : 100% not working for img (on mobile), 看代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57544337/

相关文章:

javascript - 如何将 “select all data-tab-targets” 转换为 jquery?

android - 将 flickr 图片添加到 android 画廊并显示它

python - 在 Django 模板中显示图像

android - 如何检查文件是否已被媒体广播接收器扫描

html - 编辑 Joomla 模块 CSS

javascript - 在我的特定 div 上实现视差效果的简单方法?

javascript - 如何检查浏览器是否支持翻转(即许多移动设备没有光标)

css - ExtJS 组合框无法正确呈现

html - 如何删除 html 和 css 中主要内容和页脚之间出现的大空间?

css - 这可能吗?单击 iframe 上的图像