Resize image with grouped label

draw.io

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:

good_resize

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:

bad_resize

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>

Best Answer

Create two shapes, the rectangle and the image (child). Now for the child shape enable the resizeWidth and resizeHeight properties.

Try entering this example as the diagram: https://pastebin.com/ayBstZ14

Related Topic