Geek Answers Handbook

Overflow: hidden not working in email

I am trying to send some messages with some images. If I display images on a web page, they are 100x wide and 100px high, but if the image is above 100px, it will hide extra pixels.

If I try to send it by email, I cannot get it to crop the extra height of the image.
Here is what I send by 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">
+6
css email hidden overflow
source share
4 answers

It is possible that the CSS you are trying is simply not supported by your email client. Email clients typically support a significantly reduced subset of HTML and only minimal CSS. When composing emails, HTML is often the right reason ... HTML table layout, etc., to get the most support.

EDIT: IMO trying to crop an image using HTML / CSS will not be possible if you want this to work across all email clients. Relevant properties that could help achieve this: background image, height, overflow, clip, etc. Just not supported all over the board. So, although this will work for some, it will not be for others.

An alternative would be to reduce the width so that the height is always 100 pixels. You will need to calculate the width of the server side in order to maintain an appropriate aspect ratio.

However, I think the best solution would be to create a (more) square 100px image on the server side with PHP?

+8
source share

Perhaps you should take a look at the CSS Support Guide for Email Clients to find out which CSS attributes you can use and cannot use for various email clients.

+4
source share

To do this, you need to create a square object (Div or table) and put 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.

+3
source share

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

+1
source share

More articles:


All Articles