图标图像不再跟随大小样式在ios移动的设备上

zxlwwiss 于 2023-01-03 发布在 iOS

关注(0)|答案(3)|浏览(124)

我有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;
    }

超文本标记语言

<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？

ios

来源：https://stackoverflow.com/questions/73071919/icon-image-doesnt-follow-size-style-on-ios-mobile-devices

3条答案

按热度按时间

83qze16e1#

试试这个

#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>

赞(0）回复(0）举报 2023-01-03

qxsslcnc2#

问题是我通过parent 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>

赞(0）回复(0）举报 2023-01-03

h9a6wy2h3#

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

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

赞(0）回复(0）举报 2023-01-03

我来回答

图标图像不再跟随大小样式在ios移动的设备上

3条答案

相关问题

热门标签

最新问答