Image aspect ratio issue on resize

jatindotdev commented 3 months ago

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

arikchakma commented 3 months ago

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

arikchakma commented 2 months ago

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

arikchakma / maily.to

Image aspect ratio issue on resize #50