Question

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

有什么方法可以解决这个问题吗？

我认为这与这个领域有关，我不确定。

我似乎无法使它们适当地适应。

@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属性？您还需要指定背景大小。因为你已经指定了宽度和宽度。高度，您可以使用'包含'作为背景大小。

背景大小：包含吗

将图像缩放到最大尺寸，使其宽度和宽度均匀高度可以适合内容区域

所以您发布的代码将成为：

@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;
            }

firefox没有出现按钮（图像）

1 个答案: