Thanks! This is very helpful. If you're asking how the documentation could be improved, well, a discussion of how it actually works (such as yours) would be helpful.
The docs appear to consider core-image in a vacuum -- as if you're dropping it into the body of the page with nothing else. But, of course, I was putting it into another element which was in another element etc. I'd yanked those from other examples (I've been playing with Polymer for only the past couple of days), so I was not-so-blissfully unaware that the CSS Flexbox settings of the parent element would have a significant effect. Took me a while to realize that "layout vertical center-center" on the parent was what was constraining my box to a small portion of the visible area. Some discussion -- especially when working with background images -- of how the various pieces inter-relate (or at least a link to same) would probably help others. Thank also for your invitation to post questions. That's great, but, of course, even more desirable would be to improve the documentation to the point where questions were unnecessary. Anything I can do to help, let me know. It's still quite confusing. If I use a standard img element and set min-height and min-width to 100% I get exactly the behavior I desire. If I use the core-image element and try to use min-sizes, it doesn't appear at all (obviously because in one case it's foregrounded and in the other backgrounded -- but what the benefit of backgrounding the image is is not clear). Chas. On Tuesday, December 16, 2014 12:54:18 PM UTC+13, Kevin Schaaf wrote: > > 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] > <javascript:>> 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] <javascript:>. >> 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/1dcddffc-928e-4f6b-968d-656d3eb28261%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
