Member Avatar for shivendu

Hi 2 All,

I am getting problem with email images. The TD width and height is fixed but the image is coming dynamically from databse which might be bigger or smaller. If I apply overflow:hidden also, the image is showing up like squized or streched.

Is dere any solution to apply fix to the image. Specially in outlook. As we all know emailers wont support external links or .js for security reasons as they are going to block it.

Thanking in advance.

  • 3 Contributors
  • 2 Replies
  • 295 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by samc36

Dani AI

Generated

Short answer for : stop forcing both width and height — let the image keep its aspect ratio, give Outlook a fixed HTML width, and let other clients scale with inline CSS. As observed, setting width and height to 100% will distort images; instead set one dimension (usually width) and make the other auto. Practical, widely-used patterns are covered in mail/client guides and responsive-email writeups. (templates.mailchimp.com)

Example markup that works in most clients (put this inline inside the TD you already have):

<img src="YOUR_DYNAMIC_SRC" width="600" alt="" 
     style="display:block;border:0;outline:none;text-decoration:none;
            max-width:600px;width:100%;height:auto;">

Notes: use the numeric width HTML attribute (no "px") so Outlook uses it as a fallback, and keep height:auto so the image never squashes. Many developers add max-width and width:100% so webmail/mobile shrink while Outlook falls back to the width attribute. (stackoverflow.com)

Outlook gotchas and reliable fixes: Outlook (Word engine) does not honor max-width/object-fit reliably and can rescale images using embedded DPI info, so images can appear larger/smaller or get cropped. If you need exact cropping or a fixed-height hero, either (a) pre-resize/crop server-side to the exact pixel dimensions you want, or (b) use a background-image approach with VML fallback for Outlook (more code, but consistent result). Always include alt text. (stackoverflow.com)

Quick troubleshooting checklist:

  • Save/serve images at the intended pixel dimensions (or 2x for Retina) and 96 DPI when possible.
  • Add the inline width attribute plus style="width:100%;height:auto;display:block;".
  • If cropping/cover behavior is required, pre-crop or use background + VML for Outlook.
  • Test in real Outlook desktop and web clients (and mobile) — client quirks are common; lists like the ones linked are useful for checking support. (templates.mailchimp.com)

This approach keeps images from stretching while remaining responsive across most email clients.

Recommended Answers

All 2 Replies

Member Avatar for samc36

Adjust the img parameters in your css file to reflect it being 100% of width or height of your TD container. If you set the image to scale to 100% for both width and height, then your image will distort/skew/stretch.

Hope that helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.