The `sizing` property only has a meaning you have sized the <core-image> explicitly (either via CSS or using the height/width attributes) -- cropping or containing an image to an unknown size doesn't really make sense. The meaning of `sizing` is "hey, I'm giving this thing a fixed size (e.g. 200px by 200px), so I'm going to tell you how to deal with images that don't match this aspect ratio" -- you can either fit the smaller dimension and crop the larger dimension (cover), or fit the larger dimension and letterbox the smaller dimension (contain). It uses css background-size <https://developer.mozilla.org/en-US/docs/Web/CSS/background-size> under the hood which has a lot more options, but those are the most common.
I guess you've already unblocked yourself, but I went ahead and made a JSBin showing a simple left-aligned & cropped sample using both CSS and attributes to size the <core-image>: http://jsbin.com/wuzupatito/1/edit?html,output I'd be interested to know where you were getting yourself tripped up; that is, how was your usage differing from the sample? And in the future, consider just sending a JSBin that reduces your problem down to something simple and send it out to this list before you've sunk so much time into it; there are lots of people here willing to help (and identify stuff that might actually be broken) -- code samples to understand the problem are the most efficient. Cheers, Kevin On Mon, Dec 15, 2014 at 3:41 PM, Charles Munat <[email protected]> wrote: > > Ha, ha. The moment you write it up, you find some answers. Have eliminated > most of the problems with positioning by changing the attributes on the box > into which the core-image is being inserted. Weirdly, if I add text inside > the core-image element, then height and width are not necessary, I guess > because the p element in there is forcing a width. But if I move the text > outside the element (core-image empty), then it won't display unless I give > it a width and height. > > Sadly, it seems that the most painful part of Polymer, as with everything > web, is the CSS. Sigh... > > > On Tuesday, December 16, 2014 12:18:33 PM UTC+13, Charles Munat wrote: >> >> I've spent roughly eight hours trying to make core-image work. I'm not >> sure what the trick is, but the online documentation is no help at all. >> >> From what I've been able to determine, the image does not appear unless >> dimensions are included, but there is nothing about this in the API >> documentation. When dimensions are provided, they appear to override the >> sizing attribute, which makes one wonder what the point of the attribute is. >> >> I just want the image to be pinned to the left and to fit the box, with >> overflow cropped. And I want to layer text on top of it. I can get the >> text, but can't seem to position it at all. I'm pretty sure that I'm just >> missing some small thing, but apparently it was so small that the writers >> of the documentation didn't think it worth mentioning. Unless I missed >> something (very possible... brain is fried). >> >> Anyone know the trick to this? Example? The online docs are nothing but >> frustrating. >> >> TIA. >> >> Chas. >> > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/2cb3d29a-46a5-4bb9-9d97-a010b60721a9%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/2cb3d29a-46a5-4bb9-9d97-a010b60721a9%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHW5_6xprq%2BNF_3mOVwc09xFBse30O%2Bfgc73Sr62JZeTywdKfA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
