Styles endow a single component with additional behaviors or properties.
For example, the alignHM horizontally centers its component, reflexively giving the component its own min width. It is still given the full height available to it!
var nbsp;feynmanC nbsp;= nbsp;hcj.component.image('https://hcj-js.org/feynman.jpg');
var nbsp;feynmanHorizontallyCenteredC nbsp;= nbsp;hcj.component.alignHM(feynmanC);
Feynman has lost weight!
Again, the primitive definition of the image component is to blame. The alignHM component horizontally centers its contents, restricting them to their own minimum width, but the usual rules apply for their viewport's height. In particular, this Feynman is stretched over the full height of the iframe.
The alignVM style returns a component in which its argument is vertically centered. As usual, the alignVM component is responsible for allocating its own viewport. It is defined to give its child component the full width of its viewport, but only as much height as it needs, centering it inside of any surplus vertical space.
In this example, feynmanVerticallyCenteredC is defined as the alignVM of feynmanC.
Feynman is on tenterhooks!
Combining the alignVM and alignHM styles, Feynman can be centered in the window without being stretched. The all function takes an array of styles and returns a single style that composes them.
Aligning images both horizontally and vertically such that their aspect ratio is maintained is so common that the keepAspectRatio style is defined to do just this. It preserves the aspect ratio of its component, either fitting the content and leaving space around it, or filling the space and possibly cropping the content, while also optionally aligning it top, bottom, left, or right.
This includes a hcj.component.keepAspectRatio config object with two properties, fill and top. Feel free to toggle them and see what happens!
