CODEWITHSUNDEEP
cssfluid-images
rhavin
rhavin

Reputation: 1687

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

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:

enter image description here

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:

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?

Upvotes: 0

Views: 99

Answers (1)

justinw
justinw

Reputation: 3976

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>

Upvotes: 0

Related Questions