Адаптивные <table>изображений для писем - PullRequest
Новая
       28

Адаптивные <table>изображений для писем

0 голосов
/ 19 октября 2019

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

Спасибо 

<body style="margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="border-collapse: collapse;">
    <tr>
        <td align="center" max-width="100%" height="auto"; >
            <img max-width="100%"; !important; src="https://i.ibb.co/TqP2gBh/sky-email.png" alt="sky" style="display: block;" /> 
        </td>
    </tr>
    <tr>
        <td max-width="100%" height="auto";>
        <img max-width="100%"; src="https://i.ibb.co/qygC43j/eader-email.png" alt="header"   style="display: block; " /> 
    <table border="0" cellpadding="0" cellspacing="0" 
        </td><a href="https://evyatarmor.com">  <img width="100%";  src="https://i.ibb.co/G7FWJf3/portfolio-email.png" alt="button" style="display: block;" />
     </tr>
     <tr>
        <td style="padding: 0 0 100px 0px;" width="100%" height="auto";>
        <img max-width="100%"; src="https://i.ibb.co/P5b9KTb/green-email.png" alt="header" style="display: block;" /> 
        <table border="0" cellpadding="0" cellspacing="0" width="100%"> </td>
    </tr>

1 Ответ

0 голосов
/ 21 октября 2019

  1. Вам не хватает соответствующего адаптивного тега в голове:

  2. Макс. Ширина не является атрибутом, его следует определить в блоке стиля каксвойство CSS.

  3. У вас есть открытые теги или отсутствующие теги по всему шоу здесь. Это вызовет проблемы с адаптивной работой, а также с общим рендерингом.

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

<head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  
  <style type="text/css">
    @media only screen and (max-width:500px){
      .wrapper{ width:100% !important; }
    }
  </style>
</head>
<body style="margin: 0; padding: 0;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper" style="border-collapse: collapse;">
    <tr>
      <td align="center" max-width="100%" height="auto"; >
        <img src="https://via.placeholder.com/500x150" alt="sky" style="display: block; max-width:100%;" /> 
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://via.placeholder.com/500x150" alt="header"   style="display: block; max-width:100%;" /> 
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
          <tr>
            <td>
              <a href="https://evyatarmor.com">  <img width="100%" src="https://i.ibb.co/G7FWJf3/portfolio-email.png" alt="button" style="display: block;" /></a>
            </td>
          </tr>
          <tr>
            <td style="padding: 0 0 100px 0px;">
              <img max-width="100%"; src="https://i.ibb.co/P5b9KTb/green-email.png" alt="header" style="display: block;" />
            </td>
          </tr>
        </table>
    </body>
...