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

Slifka

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?

Dash

ok i'm already using tables and the email is good, just the images aren't squared... – Slifka

May be fix the height of the table row/cell, with the height attribute rather than inline style? Although Outlook is likely to be a stumbling block. – Dash

@Slifka Unfortunately, looking more into this, I cannot see an HTML/CSS solution to your problem I'm afraid. I've updated my answer. – Dash

I understand. I wasn't trying to get it to work across all clients. Thanks for your efforts. – Slifka

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.

Spikenard

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

Refrigerant

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

Ruthieruthless