Как предотвратить ненужное расширение изображений в HTML-шаблоне внутри Outlook с помощью React?

Я создаю генератор электронной почты с помощью React. Я отображаю таблицы (поскольку это то, что должно быть в электронном письме).

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

Вот конкретный компонент, который отображает изображения:

const Ad = ({ image, link, hasDivider, styles = localStyles }) => (
  <>
    <Grid.Row className={styles.container}>
      <a href={link}>
        <span
          dangerouslySetInnerHTML={{
            __html: `
            <!--[if mso]>
            <table width="100%">
              <tr>
                <td>
                  <img width="100%" src=${image}
                  alt="ad" style="text-align: right; width: 100%; border: 0;
                  text-decoration:none;
                  vertical-align: baseline;">
                </td>
              </tr>
            </table>
            <div style="display:none">
            <![endif]-->`
          }}
        />
        <Img className={styles.image} src={image} alt="ad" />
        <span
          dangerouslySetInnerHTML={{
            __html: `
            <!--[if mso]>
            </div>
            <![endif]-->
            `
          }}
        />
      </a>
    </Grid.Row>
    {hasDivider && (
      <Grid.Row>
        <Divider />
      </Grid.Row>
    )}
  </>
)

Img компонент:

const Img = ({ src, alt, className, styles = localStyles, style = {} }) => {
  return (
    <img
      src={src}
      alt={alt}
      style={style}
      className={cx(styles.img, className)}
    />
  )
}

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


reactjs css html-email
person dawn    schedule 01.12.2020    source источник
comment
Нам нужно посмотреть, как работает ваш компонент Img. Попробуйте вставить на img css max-width: 100%;   -  person Maxwell s.c    schedule 01.12.2020
comment
@Maxwells.c Привет. Я только что добавил его, хотя условное выражение do работает в Outlook, поэтому оно отображает простой HTML-тег img.   -  person dawn    schedule 01.12.2020

Ответы (1)


arrow_upward
2
arrow_downward

В Outlook для Windows (с 2007 по 2019 год, с использованием механизма рендеринга Word) процентная ширина элементов <img> основана на физической ширине файла изображения, а не на ширине родительского элемента, как следует ожидать в CSS. Итак, если ваше изображение имеет ширину 100 пикселей, width="100%" будет равно 100 пикселям. И если ваше изображение имеет ширину 2000 пикселей, оно будет равно 2000 пикселей. Подходящим решением для Outlook является использование фиксированной ширины в пикселях с помощью HTML-атрибута width и использование стилей width:100%; для других клиентов во встроенном стиле (который Outlook будет игнорировать).

Вам нужно будет обновить компонент Img, чтобы включить ширину изображения и визуализировать его примерно так:

<img width="${width}" src=${image}
                  alt="ad" style="text-align: right; width: 100%; border: 0;
                  text-decoration:none;
                  vertical-align: baseline;">
person HTeuMeuLeu    schedule 01.12.2020
comment
Не работал. Невозможно работать с Outlook. - person dawn; 03.12.2020
comment
Можете ли вы поделиться полным выходным HTML-кодом, который вы отправляете в Outlook? Также можете ли вы уточнить, какая именно версия Outlook? - person HTeuMeuLeu; 04.12.2020