这个最简单的代码不起作用。为什么它不会在移动设备上调整大小?
干杯
我在想它不知道将 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/