In diagrams.net (formerly known as draw.io), I can easily group an image and label together. There are even built-in shapes which accomplish this. For example:
I would like to resize the shape, such that:
- The image continues to fill the container
- The space between the label and image remain constant
- The font-size of the label remains constant
However, even when holding shift to keep the aspect-ratio, the image remains the same size with awkward whitespace occurring:
How do I achieve the desired resizing? This seems possible in other diagramming software, such as whimsical.com.
Here is the full diagram code:
<mxGraphModel dx="782" dy="447" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="agnOd5MOz-EUEwHnS-w4-2" value="Label" style="label;whiteSpace=wrap;html=1;align=center;verticalAlign=bottom;spacingLeft=0;spacingBottom=4;imageAlign=center;imageVerticalAlign=top;image=img/clipart/Gear_128x128.png" parent="1" vertex="1"><mxGeometry x="110" y="40" width="80" height="80" as="geometry" /></mxCell></root></mxGraphModel>