Root element width and height don't match imageAspectRatio unless set explicitly

[Sam-Scolari]

Describe the bug

This issue is likely related to #463

In this example, the text will overflow the square frame container. While the frame itself displays as square, the content inside it presumably takes up the width and height of a frame with a rectangular aspect ratio even though width and height are set to 100%.

app.frame("/test", async (c) => {
  return c.res({
    image: (
      <div
        style={{
          color: "white",
          display: "flex",
          fontSize: 60,
          width: "100%",
          height: "100%",
        }}
      >
        This is a really long line of text that overflows the square frame image
        because width and height were not set
      </div>
    ),
    imageAspectRatio: "1:1",
    // Uncommenting this fixes the issue
    // imageOptions: {
    //   width: 1200,
    //   height: 1200,
    // },
  });
});

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Frog Version

0.17.4

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[dalechyn]

Most likely it's satori's issue but might be worthwile to play with and to try to fix it. Will take a look.