Проблемы с HTML-изображениями в электронной почте Foundation, не подчиняющимися стилям размера в Outlook

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

            </a>
        </columns>
    </row>
    {{>footer}}
</container>

А вот код на странице нижнего колонтитула:

<row class="background-aqua socialLinks">
    <columns small="3" large="3" >
        <spacer size="16"></spacer>
        <a href="http://www.facebook.com/splenda">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/Facebook+Logo.png"/></center>
        </a>
    </columns>
    <columns small="3" large="3">
        <spacer size="16"></spacer>
        <a href="http://instagram.com/splenda">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/instagram.png"/></center>
        </a>
    </columns>
    <columns small="3" large="3" >
        <spacer size="16"></spacer>
        <a href="http://www.pinterest.com/SPLENDA/">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/pinterest.png"/></center>
        </a>
    </columns>
    <columns small="3" large="3" >
        <spacer size="16"></spacer>
        <a href="http://twitter.com/splenda">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/twitter.png"/></center>
        </a>
    </columns>
</row>

Вот CSS для нижнего колонтитула:

.socialLinks{
    max-width: 700px;
    a{
        max-height: 35px;
        max-width: 35px;    
    }
    img{
        padding:20px 0px;
        width:35px;
        height:35px;
        max-height: 35px;
        max-width: 35px;    
    }
}

.footer{
    img{
        padding: 45px 0 15px 0;
        max-width:148px;
        height: auto;
    }
    p{
        color:white;
        font-size: 12px;
        line-height: 16px;
        margin: 0;
    }
    .footerLink{
        text-decoration: underline;
        font-weight: bold;
        color:white;
    }
}

Все остальные изображения в электронном письме вписываются правильно, но изображения в классе socialLinks не остаются 35px. Это происходит только в Outlook, а не в других почтовых клиентах. Есть ли какое-либо решение для этого или обходной путь для Outlook? Я знаю, что он известен тем, что раздражает электронные письма в формате HTML, поэтому любая помощь приветствуется.


person Ben Cavenagh    schedule 15.06.2018    source источник


Ответы (1)


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

<img src="www.image.com" width="35" height="35"/>

а не только источник изображения и css, устанавливающий высоту и ширину

person Ben Cavenagh    schedule 15.06.2018
comment
Outlook всегда будет по умолчанию использовать фактические размеры изображения. - person gwally; 15.06.2018