css - 具有背景图像自动高度的 anchor 标记为零

Question

我的CSS:

a.red, object, embed {
    display: inline-block;
    background-image:url(/bowties/red.png);
    background-size: contain;
    background-repeat:no-repeat;
    width: 100%;
    height: 30%;
}

我的 HTML:

<a class="red"/>

我想要做的是让图像自动调整大小，这样我就可以将它们用作菜单项。一个在下一个之上，依此类推。如果我将它们保存在包裹在 anchor 中的图像标签中，则“高度:自动；”作品。我想将它们变成 Sprite ，这就是我将其拉出的原因，但我希望它们能够根据屏幕的大小进行缩放。提前致谢!

Answer 1

据我所知，这是不可能的。

我找到了一个资源，它只是让我添加了一个相对大小的“填充”图像。导致 div 获得高度和宽度的空白占位符，然后能够在容器重新调整大小时重新调整大小。有点 hack，但有效。