How can I make an Image element auto-size and respect the aspect ratio.

[mortoray]

I’m using an Image to place some images in a flex box. I’m trying to rely on auto-sizing, where I specify only a width and have the height be assigned. The image displays correctly, but the box-size of the element is much too high.

For example, the difference between these two images:

In the first one I have a height in the USS for those hex icons:

.active-icon {
   width: 70px;
   height: 70px;
   margin: 10px;
}

And in the second I don’t have a height, or I try auto. I want this to work since I’d like the size to be responsive, thus will specify a % width and need the height to be automatic.

The code fragment for the panel is:

            <ui:VisualElement name="LeftPanel" class="vertical-row">
            <ui:VisualElement class="fill-spacer"/>
            <ui:VisualElement name="TurnPanel" class="turn-panel vertical-row">
                <ui:Label tabindex="-1" text="Place Path" display-tooltip-when-elided="true" />
                <ui:VisualElement name="ActiveElements" class="horizontal-row">
                    <ui:Image name="ActiveCellA" class="active-icon" />
                    <ui:Image name="ActiveCellB" class="active-icon" />
                </ui:VisualElement>
                <ui:VisualElement name="TileCounts" class="horizontal-wrap">
                    <ui:Label tabindex="-1" text="Forest" display-tooltip-when-elided="true" />
                    <ui:Label tabindex="-1" text="12" display-tooltip-when-elided="true" name="ForestCount" />
                    <ui:Label tabindex="-1" text="Mountains" display-tooltip-when-elided="true" />
                    <ui:Label tabindex="-1" text="12" display-tooltip-when-elided="true" name="MountainCount" />
                    <ui:Label tabindex="-1" text="Grass" display-tooltip-when-elided="true" />
                    <ui:Label tabindex="-1" text="12" display-tooltip-when-elided="true" name="GrassCount" />
                    <ui:Label tabindex="-1" text="Steppe" display-tooltip-when-elided="true" />
                    <ui:Label tabindex="-1" text="12" display-tooltip-when-elided="true" name="SteppeCount" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement class="fill-spacer"/>

And the USS:

.active-icon {
   width: 70px;
   height: 70px;
   margin: 10px;
}

.turn-panel {
   color: rgb(182, 244, 243);
   width: 250px;
   background-image: resource('PanelBackground');
   padding: 20px;
   color: black;
   font-size: 22px;
   margin: 20px;
}

.vertical-row {
   flex-grow: 0;
   align-items: center;
   justify-content: center;
}

.horizontal-row{
   flex-grow: 0;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.horizontal-wrap {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   width: 100%;
}

.fill-spacer {
   flex-grow: 1;
}

[dlorre]

Image element is broken, better use background-image on a regular VisualElement.

[mortoray]

That won’t help me do auto-sizing though, as the background itself doesn’t have a size.

[dlorre]

It looks to me that background-size should cover your needs: