Overflow:hidden not working in email

Question

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">

Solution 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?

Solution 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.

Solution 3

To make this work you need to create a square object (Div or table) and place the image in it as a background image. If you need the image to be a link you need to place a transparent gif over it.

Solution 4

In response to Alan O'Rourke background image is not supported in Outlook email clients. Also if you are trying to use the background image be sure to include it as an inline style as Gmail will strip any CSS thats not inline.

View more solutions