Crestron Components Lib - Showcase App

ch5-background: scale

scale attribute

Defines how an image will fill the component when the component and the image do not have the same aspect ratio. stretch will transform the image to have same aspect ratio as the component fill will size the image to leave no extra space but will crop off either top and bottom or left and right to completely fill the component and fit will preserve the image aspect ratio centering the image leaving either letter box on top and bottom or pillar box on left and right. For fit attribute, see related imgBackgroundColor attribute.

Background scale supports stretch, fill and fit. Default value is stretch.

<div style="height: 320px;">
    <ch5-background scale="stretch" url="https://picsum.photos/id/64/800/300"></ch5-background>
</div>

Background scale fill. It covers the container by maintaining the aspect ratio.

<div style="height: 320px;">
    <ch5-background scale="fill" url="https://picsum.photos/id/64/800/300"></ch5-background>
</div>

Background scale fit. It works like pillarbox and letterbox by maintaining the aspect ratio.

<div style="height: 320px;">
    <ch5-background refreshrate="10" scale="fit" url="https://picsum.photos/id/1/200/800 | https://picsum.photos/id/2/800/200"></ch5-background>
</div>