html - Firefox 没有显示按钮(图像)

Question

所以我已经设置了我的网站并将按钮的图像放在正确的位置我相信我已经使用了正确的方法来使它在所有浏览器甚至移动设备上都能正确显示。但出于某种原因，现在我对使用 firefox 的人有一个问题，在手机上它实际上显示图标有点太大且不成比例，因为该网站是为宽屏设计的。

有什么办法可以解决firefox和手机的问题吗？

源代码:https://pastebin.com/xfsXHuTt

我相信这与这方面有关，我不确定。

我似乎无法让它们合身。

@media (min-width:320px)  {
    #store{
            content:url("http://website.com/store.png");
            width:35vw;
            height:35vw;
            max-width:100%;
            vertical-align:middle;
            text-align:center;
            display:inline-block;
            }

Answer 1

内容通常用于伪类(之前/之后)。

为什么不始终使用 background-image 属性？您还需要指定背景大小。因为您已经指定了宽度和高度，所以您可以使用 'contain' 作为背景尺寸。

background-size:contain 的作用

Scale the image to the largest size such that both its width and its height can fit inside the content area

因此您发布的代码将变为:

@media (min-width:320px)  {
    #store{
            background-image: url("http://website.com/store.png");
            background-size: contain;
            width:35vw;
            height:35vw;
            max-width:100%;
            vertical-align:middle;
            text-align:center;
            display:inline-block;
            }