How do i translate from background image source into fluid li of display:inline-block?

Question

I have an image of width: 656px and height: 60px which contains my menu's background images. Each of the menu buttons has a known position in the file, so the menu button for my menu ›media‹ is at (188x, 0y), 104w, 30h:

Each li has its own unique id.

In case you want the values as percentages (because that might be a possible solution but I still cannot figure it out), that's (28.659%x, 0%y), 15.854%w, 50%h of the file.

The actual menu might be 1em high or 2em high or whatever.

So, what I'm trying to achieve somehow in CSS:

• Keep the height of the li.
• Retain aspect ratio (for ›media‹ it is 3.466:1)
• Make each <li>'s width 3.466 times its height
• Fill it with background from source, stretching or shrinking background accordingly.

Well, in some kind of pseudo code, this is a nobrainer:

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

But how do I do it in CSS?

Answer 1

You can use calc() in css for something where you have a static px height and just want to use some simple math. Check support here.

As for this part of your question:

Fill it with background from source, stretching or shrinking background accordingly.

I am not sure what that means.

Fiddle.

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

<div>div</div>