html - 在移动设备上调整图像大小

Question

我正在尝试让我的小页面上的图像在移动设备上正常工作。现在他们根本不调整大小。在发布此内容之前，我也已经尝试在此处四处搜索以找到答案，但我发现的所有解决方案都不适合我。

该站点的 URL 位于:crypto.mmo-spellbook.com/app/

我只是想让带有图标的菜单栏在移动设备上调整大小。我尝试使用 bootstrap 并添加 img-responsive 标签，但没有用(所以我删除了它)，我还尝试在菜单周围添加一个 100% 的 div宽度，但这也无济于事。我也设置了最大宽度:

img {
    height: auto !important;
    max-width: 100% !important;
}

在我的标题中我也有:

<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, user-scalable=0">

这使得 iframe 正确调整大小，但不是实际图像。页面很简单，但是图片似乎就是不想调整大小。

感谢您的帮助。

谢谢!

Answer 1

像这样使用 flex 和更新你的 CSS :

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #353c48;
    display:flex;
    flex-wrap: nowrap;
}
img {
    max-width: 100%;
}

从 li 中删除所有样式(不需要 float )

如果你想居中元素添加这个CSS:

li:first-child {
   margin-left:auto;
}
li:last-child {
   margin-right:auto;
}

完整代码:

ul {
  list-style-type: none;
  margin: 0;
  padding: 5px 0;
  overflow: hidden;
  background-color: #353c48;
  display: flex;
  flex-wrap: nowrap;
}

ul li img {
  max-width: 100%;
}

ul li:first-child {
  margin-left: auto;
}

ul li:last-child {
  margin-right: auto;
}

<div class="coinpot-menu">
  <ul>
    <li>
      <a href="https://coinpot.co" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/coinpot.png"></a>
    </li>
    <li>
      <a href="http://moonbit.co.in/?ref=9abae445ca39" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moonbitcoin.png"></a>
    </li>
    <li>
      <a href="http://moonliteco.in/?ref=2f13109a9e5f" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moonlitecoin.png"></a>
    </li>
    <li>
      <a href="http://moondoge.co.in/?ref=02dfddfecb26" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moondogecoin.png"></a>
    </li>
    <li>
      <a href="http://moondash.co.in/?ref=5E3DE726BCCB" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/moondashcoin.png"></a>
    </li>
    <li>
      <a href="http://bonusbitcoin.co/?ref=CD8C7FD96B63" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/bonusbitcoin.png"></a>
    </li>
    <li>
      <a href="http://bitfun.co/?ref=86E32F2DCAFA" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/bitfun.png"></a>
    </li>
    <li>
      <a href="http://crypto.mmo-spellbook.com/app/help.html" target="faucetframe"><img src="http://crypto.mmo-spellbook.com/app/images/questionmark.png" height="100%" width="100%"></a>
    </li>
  </ul>
</div>