在移动设备上伸展的图标

如何解决在移动设备上伸展的图标

我在移动设备上的某些图标（它们是锚链接）出现问题。如果我在桌面版本上使用google切换栏，则一切看起来都很好，当我在智能手机上浏览页面时，该图标看起来会有些拉伸。

css可能存在一些问题，但是我无法找到问题所在。我已经尝试过几次更改高度和宽度，但是似乎没有用。有人知道吗？

这是html：

# importing libraries
from PySide2.QtWidgets import *
from PySide2.QtGui import *
from PySide2.QtCore import *
import sys

class Scene(QGraphicsScene):
    def __init__(self,_scene_width,_scene_height):
        super(Scene,self).__init__()
        self.setSceneRect(0,_scene_height)
        map_center = _scene_width / 2
        te = QTextEdit()
        te.insertPlainText("Test Text")
        te.setGeometry(map_center,map_center,100,100)
        self.addWidget(te)


class View(QGraphicsView):
    def __init__(self,_scene_height):
        super(View,self).__init__()
        self.scale_factor = 1
        self.scene_width = _scene_width
        self.scene_height = _scene_height
        scene = Scene(_scene_width,_scene_height)
        self.setScene(scene)
        self.showMaximized()

    def wheelEvent(self,event):
        if self.underMouse():

            # scale part which doesn't let the scroll part to work
            if event.angleDelta().y() > 0:
                self.scale_factor = self.scale_factor * 1.2
                self.scale(1.2,1.2)
            else:
                self.scale_factor = self.scale_factor / 1.2
                self.scale(1 / 1.2,1 / 1.2)

            # scroll part which works fine if the scale part is commented out
            self.scrollContentsBy(10,0) # values are just for testing


def main():
    app = QApplication(sys.argv)
    view = View(1000000,1000000)
    view.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

这是CSS和媒体查询：

<a href="#"><img id="icon" style="max-width:100%" "max-height: 100%"></a>

解决方法

在这里您犯了1个html错误，1个CSS错误和1个CSS优先级，您一定不知道。但是，您还应该共享a元素的容器。

HTML错误

您写道：style="max-width:100%" "max-height: 100%"

<a href="#"><img id="icon" style="max-width:100%" "max-height: 100%"></a>

但是"用于打开或关闭属性。因此，您编写它的方式将永远不会采用max-height，因为样式是封闭的max-width。您应该这样写：

<a href="#"><img id="icon" style="max-width:100%; max-height: 100%;"></a>

CSS错误

根据您的CSS代码，不会关闭mediaquery。但这应该。

@media only screen and (min-width: 300px) and (max-width:650px) {
   #icon {
    max-width:100%;
    max-height:100%;
  }
}

优先级

当内联设置style属性（直接在html中）时，它在css设置上具有优先级。除非您在CSS之后添加!important。

因此，要解决您的问题，您有2个解决方案。该代码段不会显示任何内容，因为我没有您的图标。但这是为了清楚地显示代码。

第一个内联CSS解决方案：

@media only screen and (min-width: 300px) and (max-width:650px) {
  #icon {
    max-width:100% !important;
    max-height:100% !important;
  }
}

<a href="#"><img id="icon" style="max-width:100%; max-height: 100%;"></a>

解决方案2包含CSS：

#icon {
  max-width:100%;
  max-height:100%;
}
@media only screen and (min-width: 300px) and (max-width:650px) {
  #icon {
    max-width:100%;
    max-height:100%;
  }
}

<a href="#"><img id="icon"></a>

但是此代码没有任何意义，因为无论屏幕宽度如何，您尝试应用相同的max-width和max-height，应该只是基于您共享的内容而定：

#icon {
  max-width:100%;
  max-height:100%;
}

<a href="#"><img id="icon"></a>