moon.Image set size

IRO

It is probably the newbie question of the year, sorry for that
How can I set the size of a moon.Image?

With enyo.Image I can apply a class and style with external CSS, or directly set the style in the kind declaration, but neither is working for moon.Image.

theryanjduffy

moon.Image wraps an enyo.Image to support overlays. By default, the contained image uses its natural size but can be specified via CSS classes. If you don't need the overlay feature, I'd suggest using a regular enyo.Image.

.moon-image .enyo-image {
  width: 200px;
  height: 200px;
}

IRO

Thank you theryanjduffy, it helped.
Actually the applied class is moon-image-multires, but after checking your suggestion I spotted the image id in the console, and after adding one to my moon.Image now I can get the image by the controlid_image handle.
I perefer moon.Image to enyo.Image, because I want to overlay a button, and also because moon.Image aligns perfectly in my moon.Panel, enyo.button doesn't.

And while we are at it:
Do you also know what is making moon.Image disappear if I set sizing on the control? The div is there, but without the background image. How can I size the control then?

IRO

Of course I mean:
"I perefer moon.Image to enyo.Image, because I want to overlay a button, and also because moon.Image aligns perfectly in my moon.Panel, enyo.Image doesn't."

theryanjduffy

When using sizing, you must explicitly size the moon.Image control. The img within it will fill its container.

IRO

You mean something like this should work?
{kind: "moon.Image", sizing: "cover", style: "width:200px; height:200px", src: "assets/sample.jpg"}
Because this is the phase when I am staring at a 200x200px blank div.

theryanjduffy

Appears to be a bug in 2.5.1 in which specifying sizing and src at create time fails to correctly set the image as the background-image.

Broken:
http://jsfiddle.net/ryanjduffy/2w5Lezxf/1/

Fixed in 2.7 via commits 4b3dd50 and 538fca
http://jsfiddle.net/ryanjduffy/2w5Lezxf/2/

Workaround for 2.5.1 (if you don't port those changes into your copy of enyo):
http://jsfiddle.net/ryanjduffy/2w5Lezxf/3/

IRO

Thank you. At least in this case it's not my fault