I need more explanation than this, because I'm really not seeing the problem. The image is stretched in both screenshots.

"As you can see" only applies if I can actually see it. If there's a difference between the two it's much too subtle for me to see. I need you to point out specifically what looks wrong.

Lavitiz wrote:

With all due respect, the Harmony Online Cloud is clearly cut off and hidden. =|

Ah. I see what you mean now. Here's the thing: When I implemented stretching I was dealing with the wood grain background on that label at the top. I wasn't even looking at the logo.

EDIT: The content isn't all fitting in the label.

What content are you referring to (if not the image), and do you mean the same label with the logo?

Well, here's an important question: How do you want this image to stretch, exactly?

It's stretching to the entire width of the window as it should, so there's a discrepancy between your interface's height and the one used in the webclient. That discrepancy isn't something that's easily eliminated; the webclient skin translator forces the main window to be resizable, because size-specific skins just won't work right in general. So with that being the case, how should the image appear? Letterboxing would probably look ugly in this case (if it's even feasible with CSS), and scaling both width and height would ruin the aspect ratio.

Lavitiz wrote:

Well, I'd imagine it should reflect exactly as you see in the interface editor.

The interface editor is in Windows and using the same controls used in DS. The webclient is in a browser and uses webclient-friendly versions of those controls. The parity will not be an exact 1:1, especially when it comes to some things like fonts.

So it should scale both width and height unless maintain aspect ratio in the interface is checked. If it is, then it should preform as Dream Seeker does and has it maintain it.

But again: How would you expect it to maintain the aspect ratio without letterboxing? Right now keep-aspect is not actually implemented on the webclient; it's always assumed to be true, only the image is scaled to width always instead of to height. (There are CSS reasons for this. I'm not sure if it's even possible to scale to min(width,height).)

You designed your interface for a specific size only. The webclient will not allow that, so the window has different dimensions than you expect, which is why the label does too. I'm happy to look into the feasibility of letterboxing the label image, but it can't fill both 100% width and height without blowing the aspect ratio, because the control itself no longer has the same aspect ratio as in your skin.

Lavitiz wrote:

Could you implement letter-boxing for if keep aspect ratio isn't checked? I'm not good with styling in web design so I'm not really sure what will work best and what will not.

If keep-aspect were implemented and the control had it turned off, then letterboxing would be incorrect behavior. Letterboxing or filling to the available space (cut off, which is the current behavior when width is bigger) are the two extremes for keeping the aspect ratio intact. In most cases, the cutoff behavior is better.

As it stands in dream seeker I don't believe I have keep aspect on, but it stretches out in each direction. It does distort the image but that's why I have it set at a certain size until users are logged in.

Which won't work in the webclient, because the main window can't be fixed to a specific size. That's intentional because otherwise most games would be either too large or too small.

I guess worse case scenario I could detect web client users and change the image tailored to their size?

That might be one way to go.

I think being able to control the letterboxing vs. cutoff behavior makes a lot of sense, if it's feasible in CSS, so that's something I can look into.

Just wanted to add to this: I did look up the CSS options recently and it seems this should be quite feasible. The background-size parameter allows "cover" (the current intended behavior, but it doesn't work that way exactly) or "contain" (letterboxed), as well as sizes. I should be able to add support for keep-aspect as well as letterbox options. DS probably would need a letterbox option as well, but I'm not hugely concerned about DS keeping up with the webclient, since the webclient is far more extensible.