What css can I use to crop image on the fly in an email template?

Question

how to crop image for email template? I have an image that is of particular width (example 520px). I want to ensure that the height is never more than 150px. This is for email only... If I use max-height or just height css, then it gets pixelated? What other better option do I have?

score 6 · Accepted Answer · answered Apr 14 '15 at 12:44

Ideally, you would crop the image (either manually or programmatically), and have it stored somewhere (on a CDN), where you can embed the image, and it will display as intended.

If this ^ isn't an option, your limitations are based on what email clients you need to support.

I am using Campaign Monitor CSS as a reference.

Option 1: If you aren't concerned with supporting Outlook.com and/or Outlook 2007/10/13, you could set the image as a background property on an element as such:

<div style="
    width: 520px; 
    height: 150px; 
    background-image: url(http://placehold.it/520x520)">
</div>

Here we are using a 520x520 (square) image, and setting the parent element to the desired size (520x150 as per your example).

Now you are faced with the issue of positioning the image background. As per the guide, if you attempt positioning, you will lose Gmail, which is probably a deal breaker. However, as an exercise, you could do this:

<div style="
    width: 520px;
    height: 150px;
    background-image: url(http://placehold.it/520x520);
    background-position: 50%;>
</div>

Now you've got an image positioned (centered), at your desired size. on an element.

Option 2: Is also limited to a specific set of clients. You could feasibly use position: relative, on the wrapper, and position: absolute, on the tag. Then use top, left properties to position.

Of course, you lose Yahoo, in addition to Outlook and Gmail.

HTML emails are tricky. I'm sure there are several other options out there. I hope this response gets you pointed in the right direction.

Is it possible to target gmail where I have the background-image such that when it is gmail it just shows the image as it is? — Hello Universe, Apr 15 '15 at 00:21
@Welcome, that's a good question. [Litmus.com](https://litmus.com/blog/understanding-gmail-and-css-part-2) makes note that using the display property can be used in some email clients to hide/show content across different devices. Gmail, however, does not support the display property, so this isn't an option. I am not sure of any other option here. — smcka, Apr 15 '15 at 01:47

score 3 · Answer 2 · edited May 23 '17 at 11:58

With various mail clients having limited support for html and CSS attributes you're going to have to have trouble achieving a cropped image affect using vanilla CSS and HTML techniques.

The following is supported by most mail clients other than Outlook and Outlook.com

<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x200.jpg)
"></div>

Unfortunately most mail clients have no support for clip, overflow:hidden or background-clip.

Even an embedded image has very little support. Send a base64 image in HTML email

The best solution would be to render a copy of the image as you need it without any CSS trickery. This is the only real solution to your problem.

What css can I use to crop image on the fly in an email template?

2 Answers2