[GH-ISSUE #50] Image aspect ratio issue on resize #25

New issue

Closed

opened 2026-03-01 14:39:35 +03:00 by kerem · 2 comments

kerem commented

2026-03-01 14:39:35 +03:00

Owner

Originally created by @jatindotdev on GitHub (Jul 9, 2024).
Original GitHub issue: https://github.com/arikchakma/maily.to/issues/50

Hey, so here i am using maily for my personal project which is for mass mailing and more. I am facing this issue with images when the image is resized using drag, (like if you resize it to be smaller and then stretch to full) the aspect ratio of the image breaks

This is when you just add an image looks good

This is when you resize and stretch to full

Same on desktop, so i did some digging

Before

const mainImage = (
  <Img
    alt={alt || title || 'Image'}
    src={src}
    style={{
      height,
      width,
      maxWidth: '100%',
      outline: 'none',
      border: 'none',
      textDecoration: 'none',
    }}
    title={title || alt || 'Image'}
  />
);

After

const mainImage = (
  <Img
    alt={alt || title || 'Image'}
    src={src}
    style={{
      height: "100%",
      maxHeight: height,
      width: "100%",
      maxWidth: width,
      aspectRatio: width && height ? `${width}/${height}` : undefined,
      outline: 'none',
      border: 'none',
      textDecoration: 'none',
    }}
    title={title || alt || 'Image'}
  />
);

This fixes the issue on desktop but on mobile screens it still a problem

Device Info: iPhone 15, Gmail on iOS 18

Originally created by @jatindotdev on GitHub (Jul 9, 2024). Original GitHub issue: https://github.com/arikchakma/maily.to/issues/50 Hey, so here i am using maily for my personal project which is for mass mailing and more. I am facing this issue with images when the image is resized using drag, (like if you resize it to be smaller and then stretch to full) the aspect ratio of the image breaks ### This is when you just add an image looks good <img src="https://github.com/arikchakma/maily.to/assets/59236972/26608152-701f-4979-b44c-37464c6f33ab" width="300" /> This is when you resize and stretch to full <img src="https://github.com/arikchakma/maily.to/assets/59236972/58244807-05c9-4131-9260-82c5780ac139" width="300" /> Same on desktop, so i did some digging Before ```jsx const mainImage = ( <Img alt={alt || title || 'Image'} src={src} style={{ height, width, maxWidth: '100%', outline: 'none', border: 'none', textDecoration: 'none', }} title={title || alt || 'Image'} /> ); ``` After ```jsx const mainImage = ( <Img alt={alt || title || 'Image'} src={src} style={{ height: "100%", maxHeight: height, width: "100%", maxWidth: width, aspectRatio: width && height ? `${width}/${height}` : undefined, outline: 'none', border: 'none', textDecoration: 'none', }} title={title || alt || 'Image'} /> ); ``` This fixes the issue on desktop but on mobile screens it still a problem Device Info: iPhone 15, Gmail on iOS 18

kerem closed this issue

2026-03-01 14:39:35 +03:00

kerem commented

2026-03-01 14:39:36 +03:00

Author

Owner

@arikchakma commented on GitHub (Jul 9, 2024):

That's strange, I will have a look into it.

@arikchakma commented on GitHub (Jul 9, 2024): That's strange, I will have a look into it.

kerem commented

2026-03-01 14:39:36 +03:00

Author

Owner

@arikchakma commented on GitHub (Jul 17, 2024):

In the next update it will be fixed, FYI we can't use aspect-ratio in emails

@arikchakma commented on GitHub (Jul 17, 2024): In the next update it will be fixed, FYI we can't use [aspect-ratio](https://www.caniemail.com/search/?s=aspect) in emails

kerem referenced this issue

2026-03-01 14:40:06 +03:00

[PR #25] [MERGED] Implement Image Resizer #104

kerem referenced this issue

2026-03-15 02:09:07 +03:00

[PR #25] [MERGED] Implement Image Resizer #332