0

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:

  • 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?

Anik Islam Abhi
  • 25,137
  • 8
  • 58
  • 80
rhavin
  • 1,512
  • 1
  • 12
  • 33
  • 1
    If you're using some special application or programming language, you should mention that in your question and/or tags. StretchBlt() is not CSS nor is it really transferable to CSS, and websites are not mapped by coordinate systems the way you seem to be describing it. You'll need to use JavaScript for much of this. – TylerH Nov 10 '15 at 19:06
  • [ ] <- check here if you ever heard of the term ›pseudocode‹. – rhavin Nov 10 '15 at 19:10
  • 1
    I'm aware of what pseudo code is. Generally when you are talking about how to do something in a language, you use pseudo code in *the same language*. It's not very useful for me to write some pseudo code in FORTRAN if I'm asking a Unity question, for example. – TylerH Nov 10 '15 at 19:12
  • 1
    @TylerH rhavin's responses were not helpful (although admittedly humorous), but adding the tag for whatever language uses `StretchBlt()` is not actually helpful. Users would then assume that they could just write an answer using that language when rhavin is specifically wanting a CSS only answer. The code is readable regardless. This is because rhavin laid out the parameters first. He could have added what the language was in the question text, but it does not belong in the tags. – Joseph Marikle Nov 10 '15 at 19:22
  • @JosephMarikle Sorry, as someone who knows CSS and even JavaScript/jQuery, the second line of code is not readable to me. You can guess at it, but unless you know what `StretchBlt()` is, you can only guess. Also my comment stressed adding info to the question; the mention of tags was only an addendum, please don't fixate on those three words out the other hundred. – TylerH Nov 10 '15 at 19:29

1 Answers1

0

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>
justinw
  • 3,856
  • 5
  • 26
  • 41
  • >I am not sure what that means. it simply means that if li.h=100 (so li.w = 365) then make li (365,100) = src (292,30). – rhavin Nov 10 '15 at 20:20
  • @rhavin the question remains; your follow up comment has done nothing to explain the quote I included in readable terms. You are asking a CSS question but responding using a coding language you have not included in your OP or OP tags. If you are asking how to keep the `li` elements and their images responsive to browser resizing, then you should probably say that with words...but at this point I am not going to assume any more. – justinw Nov 10 '15 at 21:43