moon.Image set size

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.

Comments

  • 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;
    }
  • 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?
  • 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."
  • When using sizing, you must explicitly size the moon.Image control. The img within it will fill its container.
  • 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.
  • 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/
  • Thank you. At least in this case it's not my fault :)
Sign In or Register to comment.