css - 如何从背景图像源转换为 display:inline-block 的流体 li？

Question

我有一张图片，width: 656px其中height: 60px包含我的菜单的背景图片。每个菜单按钮在文件中都有一个已知位置，因此我的菜单 ›media‹ 的菜单按钮位于 (188x, 0y), 104w, 30h：

每个li都有自己唯一的 id。

如果您希望将值作为百分比（因为这可能是一个可能的解决方案，但我仍然无法弄清楚），那就是文件的 (28.659%x, 0%y), 15.854%w, 50%h。

实际的菜单可能是 1em 高或 2em 高或其他。

所以，我试图在 CSS 中以某种方式实现：

• 保持li的高度。
• 保留纵横比（对于 ›media‹，它是 3.466:1）
• 使每个<li>的宽度成为其高度的 3.466 倍
• 用源背景填充它，相应地拉伸或收缩背景。

好吧，在某种伪代码中，这很简单：

li.w = li.h * 3.466;
StretchBlt(src,188,0,104,30,li,0,0,li.w,li.h);

但是我如何在 CSS 中做到这一点？

Answer 1

您可以calc()在 css 中使用具有静态px高度并且只想使用一些简单数学的东西。在此处检查支持。

至于你问题的这一部分：

用源背景填充它，相应地拉伸或收缩背景。

我不确定那是什么意思。

小提琴。

div {
    background: red;
    height: 60px;
    width: calc(60px * 3.466);
}

<div>div</div>