Huge placeholder for pictures outlook-CodePudding

I'm trying to implement newsletters and I've inserted some pictures.

If I don't download the header-picture in the newsletter, the placeholder is just huge:

It works great on Gmail, outlook mobile but not on outlook desktop.

My code for the newsletter is the one provided below. The picture that makes problems is the one with alt="header".

Don't be confused why there's "height" set for so many elements. It was to test if anything affects the blocked picture but it doesn't.

<table id="header" width="100%" height="250px" cellpadding="5" cellspacing="0" style="height:110px">
    <tr>
        <td align="left" height="110px" style="position:relative;height:110px;Background-color:#040C2C">
            <a href="{$baseUrl}/{$lng}" style="height:110px">
                <img style="width:100%; height:110px" height="110px" width="100%" src="{$baseUrl}{$SkinPath}/images/header_receipt.png" alt="header"></img>
            </a>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="border-bottom:1px solid #000000;padding:0; font-size: 0px; line-height: 0;"></td>
    </tr>
    <tr>
        <td colspan="2">
            <xsl:value-of select="aspdnsf:ReceiptTopic('ReceiptHeader', $OrderNumber)" disable-output-escaping="yes" />
        </td>
    </tr>
</table>

CodePudding user response：

With the width and height attributes (height=, width=), you don't put the units in there for px.

Also, to work out the proportions, with width attribute needs to be a pixel value.

So try:

<img style="width:100%; height:110px" height="110" width="600" src="{$baseUrl}{$SkinPath}/images/header_receipt.png" alt="header">

I also removed </img> as that's not a thing for the <img> tag, it self-closes.