Переполнение: скрыто не работает в электронной почте

Question

Я пытаюсь отправить несколько писем с изображениями. Если я отображу изображения на веб-странице, они имеют ширину 100x и высоту 100px, но если изображение выше 100px, лишние пиксели будут скрыты.

Если я пытаюсь отправить его по электронной почте, я не могу заставить его обрезать лишнюю высоту изображения.
Вот что я отправляю в письме:

<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

Вполне возможно, что используемый вами CSS просто не поддерживается вашим почтовым клиентом.Почтовые клиенты обычно поддерживают значительно сокращенное подмножество HTML и только минимальный CSS.При составлении электронных писем в формате HTML часто требуется вернуться к основам ... макет таблицы HTML и т. Д., Чтобы получить максимальную поддержку.

РЕДАКТИРОВАТЬ: ИМОпопытка обрезать изображение с использованием HTML / CSS будет невозможна, если вы хотите, чтобы это работало на всех почтовых клиентах.Соответствующие свойства, которые могут помочь достичь этого: фоновое изображение, высота, переполнение, клип и т. Д., Просто не поддерживаются.Поэтому, хотя для некоторых это будет работать, для других - нет.

Альтернативой может быть уменьшение ширины, чтобы высота всегда составляла 100 пикселей.Вам нужно будет рассчитать ширину на стороне сервера, чтобы поддерживать соответствующее соотношение сторон.

Однако, я думаю, что может быть лучшим решением было бы сгенерировать (другой) квадрат 100px изображения на стороне сервера сPHP

Answer 2

Возможно, вы захотите взглянуть на Руководство по поддержке CSS в почтовых клиентах , чтобы узнать, какие атрибуты CSS вы можете и не можете использовать для различных почтовых клиентов.

Answer 3

Чтобы сделать это, вам нужно создать квадратный объект (Div или таблицу) и поместить изображение в качестве фонового изображения. Если вам нужно, чтобы изображение было ссылкой, поместите поверх него прозрачный рисунок.

Answer 4

В ответ на Алан О'Рурк фоновое изображение не поддерживается в почтовых клиентах Outlook. Также, если вы пытаетесь использовать фоновое изображение, обязательно включите его в качестве встроенного стиля, так как Gmail удалит все CSS, которые не встроены.