Overflow:hidden not working in email...

Question

Hi, I'm trying to send some emails with some images. If I display the images on a webpage they are 100x wide and 100px tall, but if the image is taller than 100px it will get the excess pixels hidden.

If I try to send it in an email, I can't get it to clip the excess height of the image.
Here's what I'm sending in the email:

<img  src="<?php echo base_url().$thumb;?>"  style="border:1px solid #35538d;width:100px;height:100px;overflow:hidden;text-align:center;background-color:#f0f0f0;" rel="nofollow" alt="Profile Photo">

Answer 1

It's quite possible that the CSS you are trying is just not supported by your email client. Email clients generally support a greatly reduced subset of HTML and only minimal CSS. When composing HTML emails it is often a case of back to basics... HTML table layout etc. in order to get the greatest support.

EDIT: IMO trying to crop an image using HTML/CSS is going to be impossible if you want this to work across all email clients. The relevant properties that could help to achieve this: background-image, height, overflow, clip, etc. just aren't supported across the board. So, although it will work for some, it won't for others.

An alternative might be reduce the width so that the height is always 100px. You would need to calculate the width server-side in order to maintain the appropriate aspect ratio.

However, I think that may be the best solution would be to generate a(nother) square 100px image server-side with PHP?

Answer 2

You might want to have a look at the Guide to CSS support in email clients page to see which CSS attributes you can and cannot use for the various email clients.