Arhn - архитектура программирования

Gmail удаляет размер фона в моей рассылке

У меня есть информационный бюллетень по электронной почте, который содержит фотографии продуктов, продвигаемых через информационный бюллетень. Я использую полноразмерные изображения и изменяю их размер с помощью:

<table cellspacing="0" cellpadding="0" border="0" style="width: 201px; height: 240px; background-image: url({{ item1.picture }}); background-repeat: no-repeat; background-size: 100% auto;">

Gmail удаляет

background-size: 100% auto;

тег и изображения отображаются в полном размере. Есть ли способ исправить это? Я не хочу изменять размер каждой картинки на стороне сервера.

gmail html css newsletter
05.12.2013

  • какой тип документа вы используете 05.12.2013
  • Вы можете попробовать установить изображение в качестве фона таблицы, а не использовать атрибут стиля, как описано в stackoverflow.com/questions/8015515/ 05.12.2013
  • @Анон: Нет. Может глупый вопрос, но так ли это важно? 11.12.2013
  • Кто-нибудь нашел объяснение/решение для этого? 11.08.2014

Ответы:


1

Я работал над этим, используя сокращенный метод background css. Определите изображение, повторите и измените размер в одной строке, например:

background: url({{ item1.picture }}) no-repeat top / 100% auto;

Обратите внимание, что атрибут размера должен быть определен после атрибута позиции («верх») и разделен символом «/».

25.08.2014
  • Работал отлично. Блестящий. 30.01.2015
  • ЭТО ОЧЕНЬ ХОРОШО! ЭТО РАБОТАЕТ :D 07.01.2016
  • Chrome по-прежнему удаляет размер и сохраняет только отсутствие повторов. Есть ли что-то, что я делаю неправильно? 21.03.2016
  • Гениальное решение ???? 19.08.2016

    • 2

    Ваш метод не будет работать в Outlook. Я знаю, что это не вопрос, но это второй по популярности почтовый клиент. Я бы предложил использовать комбинацию VML и фона, как показано в backgrounds.cm.

    Я не уверен, что вы получите фоновое изображение с измененным размером на 100%, работающее в электронной почте html. Я видел только плиточные или неплиточные реализации. Есть ли причина, по которой вы не можете просто использовать обычный тег изображения? Что-то вроде этого хорошо работает с кросс-клиентом:

    <td>
  <img alt="" src="" width="100%" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
    13.01.2014

    3

    Я создал внутри электронного письма кнопку с логотипом Twitter, например: введите здесь описание изображения

    Поэтому я использовал background-image, чтобы добавить логотип Twitter, и background-size, чтобы отобразить размер сетчатки изображения.

    Я попробовал полную версию background-* свойств CSS, а также сокращенную версию background: url() no-repeat 16px center / 24px auto, Gmail все еще чередовал ее.

    Поэтому мое решение состоит в том, чтобы использовать HTML-тег img вместо свойства background. И это работает на самом деле лучше, поскольку тег img более широко поддерживается среди почтовых клиентов.

    <a href="#" style="background-color: #55acee; display: inline-block; padding: 12px 24px;  color: #ffffff;  font-family: sans-serif; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; text-decoration: none; min-width: 200px; border-radius: 2px; border-bottom-color: #188acf; border-bottom-width: 3px; border-bottom-style: solid;">
  <!-- logo image should be 48x48px -->
  <img src="[email protected]" width="24" height="24" style="vertical-align: bottom; padding-right: 10px;"> 
  Share the good news on Twitter
</a>
    09.02.2016
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..