fix: Fix image auto sizing (#460)

It partially fixes #458 but I believe there're more uncovered cases.

src/handler/index.ts

@@ -66,20 +66,18 @@ export default async function handler(
  let contentBoxHeight = style.height || props.height
 
  const isAbsoluteContentSize =
- typeof contentBoxWidth !== 'string' &&
- typeof contentBoxHeight !== 'string'
+ typeof contentBoxWidth === 'number' &&
+ typeof contentBoxHeight === 'number'
 
- if (typeof contentBoxWidth === 'number' && isAbsoluteContentSize) {
+ if (isAbsoluteContentSize) {
  contentBoxWidth -= extraHorizontal
- }
- if (typeof contentBoxHeight === 'number' && isAbsoluteContentSize) {
  contentBoxHeight -= extraVertical
  }
 
  // When no content size is defined, we use the image size as the content size.
  if (contentBoxWidth === undefined && contentBoxHeight === undefined) {
- contentBoxWidth = imageWidth
- contentBoxHeight = imageHeight
+ contentBoxWidth = '100%'
+ node.setAspectRatio(1 / r)
  } else {
  // If only one sisde is not defined, we can calculate the other one.
  if (contentBoxWidth === undefined) {

test/image.test.tsx

@@ -167,6 +167,59 @@ describe('Image', () => {
  expect(toImage(svg, 100)).toMatchImageSnapshot()
  })
 
+ it('should scale image to fit max-width and max-height but maintain the aspect ratio', async () => {
+ // Hit max-width
+ const svg1 = await satori(
+ <div
+ style={{
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'blue',
+ }}
+ >
+ <img
+ src={PNG_SAMPLE}
+ style={{
+ maxWidth: '100%',
+ maxHeight: '100%',
+ background: 'red',
+ }}
+ />
+ </div>,
+ { width: 100, height: 100, fonts }
+ )
+ expect(toImage(svg1, 100)).toMatchImageSnapshot()
+
+ // Hit max-height
+ const svg2 = await satori(
+ <div
+ style={{
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'blue',
+ flexDirection: 'column',
+ }}
+ >
+ <img
+ src={PNG_SAMPLE}
+ style={{
+ maxWidth: '100%',
+ maxHeight: '100%',
+ background: 'red',
+ }}
+ />
+ </div>,
+ { width: 100, height: 50, fonts }
+ )
+ expect(toImage(svg2, 100)).toMatchImageSnapshot()
+ })
+
  it('should support styles', async () => {
  const svg = await satori(
  <div