Outlook показывает изображения в исходном размере

-1

В настоящее время я работаю над настраиваемыми настраиваемыми шаблонами электронной почты, которые будут использоваться в моих клиентах Mailchimp. (да, борьба реальна.) Прошедшая неделя я пытался понять, почему Outlook показывает мои изображения с их первоначальными размерами.Outlook показывает изображения в исходном размере

Как вы можете видеть в моем фрагменте кода ниже, я установил ширину для моих img, td и tr. Также попытался добавить его в таблицу, не имело никакого значения. Таким образом, даже я установил для нее фиксированное значение, в Outlook изображения по-прежнему отображаются в исходном размере, что приводит к тому, что макет переходит в sh * t.

<body bgcolor="#e8ebee"> 

<!-- wrapper table --> 
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee"> 
<tr> 
<td> 
    <!-- content1 --> 
    <table mc:repeatable mc:variant="Section: item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;"> 
     <tr> 
      <td bgcolor="#FFFFFF"> 
       <table> 
        <tr width="650" style="width:650px;"> 
         <td style="padding-bottom: 15px; width:650px; max-width:650px;" width="650"> 
          <img mc:edit="article_image" src="my_larger_image.png" alt="" style="width:650px; max-width:650px;" width="650"> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    <!-- end content1 --> 
</td> 
</tr> 
</table> 
<!-- end wrapper table --> 
</body>

У меня также есть учетная запись Litmus, которая не показывает ошибок, связанных с изображениями при использовании превью.

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

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

У кого-нибудь есть идея или решение, которое возвращает мне силу над моими изображениями в Outlook? Я также хочу забыть о жидкой электронной почте и иметь только 2 ширины для мобильных устройств и один для рабочего стола.

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

Заранее благодарим за любую помощь!

источник

2017-01-22 Kevincore

Это позволит решить проблему:

<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />

Без дисплея: блок; иногда случается, что под вашими изображениями будет разрыв в 1px.

max-ширина: 100%; не позволяет вашему изображению быть больше, чем ваш контейнер. Ширина: 100% полезна, потому что изображение получит ширину вашего контейнера.

Вы должны установить атрибут width в точную ширину в пикселях.

Я заметил, что если я использую атрибут width вместе с max-width: 100%; то он будет корректно отображаться в Outlook на основе Word. Без max-width будет применена исходная ширина. (В Outlook на основе Word.)

источник

2017-01-23 09:13:17

Я надеюсь, что сейчас лучше. –

Привет @ gyula.nemeth, большое спасибо за ваш вклад! К сожалению, я уже пробовал это (также сделал это снова после вашего сообщения), но все же мои изображения, которые больше, чем размер, который я им разрешаю, показаны на полной ширине в Outlook. – Kevincore

Обычно я определяю ширину содержимого в таблице контейнера. Скажем, ширина = "600". Затем я добавляю ширину = "100%" во внутренние таблицы. Я также добавляю width = "100" к tds. Если я помещаю изображения внутри так, как я упоминал, их размер является идеальным. –

Outlook использует механизм визуализации MS Word, так что это вызовет проблемы. Im Mailchimp у вас есть возможность не только делать встроенные стили, но и создавать листы css заголовка, а также отвечать на @media-screen.

Что касается перспективы, то, вы должны добавить две вещи в шаблон HTML электронной почты:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

это говорит письмо, что «Эй, использовать MS Office схемы, где это необходимо.

тогда все это в заголовке CSS:

#outlook a{ 
     padding:0; 
    } 
    .ReadMsgBody{ 
     width:100%; 
    } 
    body{ 
     width:100% !important; 
     min-width:100%; 
     -webkit-text-size-adjust:100%; 
     -ms-text-size-adjust:100%; 
    } 
    .ExternalClass{ 
     width:100%; 
    } 
    .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{ 
     line-height:100%; 
    } 
    a img{ 
     border:none; 
    } 
    img{ 
     display:block; 
    }

ExternalClass поможет показать внешний вид, что вы имеете в виду для ссылки использовать движок Microsoft. Существует действительно хороший путеводитель от Mailchimp по этому самому предмету here.

Удачи вам!

изменить: многие вещи будут разбиты в вашем шаблоне. Я запустил базовый шаблон Mailchimp для вас и исправил несколько вещей. Проверьте фрагмент.

Codepen

Обратите внимание, что это по-прежнему не реагирует. Потому что вы не включили какой-либо код, чтобы сделать это так. Вы хотите добавить полные стили тела к своим таблицам, ширины и изображения TD.

источник

2017-01-23 17:08:08 scoopzilla

Привет, @scoopzilla благодарю вас за помощь, очень полезную информацию! Я добавил выше, но без каких-либо различий. К сожалению, мои изображения по-прежнему отображаются в полном размере. Но я все равно сохраню это в своем шаблоне, вероятно, это будет полезно для некоторых клиентов. – Kevincore

Посмотрите на мой пересмотренный ответ в кодеде. Если у вас больше проблем, пришлите мне сообщение или пометьте меня. У меня есть полноразмерный шаблон, который вы можете использовать. – scoopzilla

Спасибо за код, я собираюсь проверить его как можно скорее! Но мне нужно, чтобы он был отзывчивым. Не могли бы вы поделиться своим шаблоном? Большое спасибо за вашу помощь! Очень признателен. – Kevincore

Outlook показывает изображения в исходном размере

ответ

Смежные вопросы