图标图像在 iOS 移动设备上不遵循大小样式答案

【问题标题】：icon image doesn't follow size style on ios mobile devices图标图像在 iOS 移动设备上不遵循大小样式
【发布时间】：2022-12-31 06:21:31
【问题描述】：

我有 2 个图标图像，在 PC 和 Android 设备上显示正常 - 大小合适。但在 iOS 移动设备上，图标较小。我使用 Chrome 来测试网页。

CSS:

 #info-icon, #info-icon-1 {
      height: 40px;
      width: 40px;
      max-width: 100%;
      margin: 10px;
      padding: 5px;
      display: none;
      position: absolute;
      right: -60px;
      top: -10px;
    }

HTML

        <div id="info-icon">
          <button type="button" class="icon-btn" @click="openPopHelp">
            <img alt="" width="40" height="40" src="{% static 'images/help_icon.png' %}" />
          </button> 
        </div>

如何使图标在 iOS 设备上的大小合适 40x40？

【问题讨论】：

标签： html css ios responsive-design

【解决方案1】：

试试这个

#info-icon, #info-icon-1 {
      height: 40px!important;
      width: 40px!important;
      max-width: 100%;
      margin: 10px;
      padding: 5px;
      display: none;
      position: absolute;
      right: -60px;
      top: -10px;
    }

       <div id="info-icon">
          <button type="button" class="icon-btn" @click="openPopHelp">
            <img alt="" width="40px" height="40px" src="{% static 'images/help_icon.png' %}" />
          </button> 
        </div>

【讨论】：

谢谢你的回答。我发现了问题所在。我在父 div 上设置样式而不是在 img 本身上。对于 android 和 PC，它工作正常，但对于 ios 移动设备，您必须在 img 标签内设置样式。

【解决方案2】：

问题是我通过父 div 为图像设置样式。它适用于 PC 和 android 设备，但 ios 移动设备非常挑剔。我变了：

 #info-icon, #info-icon-1 {
  height: 40px;
  width: 40px;
  display: none;
  position: absolute;
  right: -40px;
  top: -10px;
}
.icon-img{
  height: 35px;
  width: 35px;
  min-height: 100%;
  min-width: auto;
  margin: 10px;
  padding: 5px;
}

在 HTML 中：

           <div id="info-icon">
              <button type="button" class="icon-btn" @click="openPopHelp">
                <img alt="info icon" class="icon-img" width="35" height="35" src="{% static 'mifit/images/help_icon.png' %}" />
              </button> 
            </div>

【讨论】：

【解决方案3】：

为什么不像这样创建一个空的 div，

<div style="margin-bottom: 12px;"></div>

【讨论】：