Gmail App squeezes image

[jurekbarth]

This is how it looks on Gmail App

Anyone knows how to fix it?

[rodriguezcommaj]

I see the image was changed, was anything changed in the image tag? Images should still be defined with dimensions via the width and height HTML attributes.

[jurekbarth]

No i just replaced the image, but i have the same issue with the original image. I found a solution, which is not perfect, but it works for me. I wrap the whole mail within another table with min-width and the overwrite it again with a media query for mobile:

<table class="gmailfix" width="560" border="0" cellpadding="0" cellspacing="0" style="min-width:560px;">
              <tr>
                <td class="gmailfix" width="560" style="min-width:560px;">

The whole problem is caused by the auto resize function from the Gmail App, but it's active by default.

[mattbairdgits]

@jurekbarth I had vertical stretching on the "img-max" images as well in the gmail app.

@rodriguezcommaj The problem is due to a combination of two things:

1. the -left and -right inlined padding on the td that has the class: "section-padding"
2. the declared height of the image

I guess this would be considered a box-model issue. When the height is declared, and there is padding on both sides, the image loses its original ratio. Removing the left and right padding and/or removing the height declaration solves the issue. Choosing which to remove depends on the design you're after.

I suppose you could also account for the padding when you declare the width and height. In the case of the repo's original image, "responsive-email.jpg", the width would be 470px and the height would be 188px.

I personally never declare height on my images. Not in an HTML attribute and not in the CSS. I support a great many email clients (thanks to Litmus <3) and have never had any issues when not declaring height

[lembitk]

I personally never declare height on my images. Not in an HTML attribute and not in the CSS. I support a great many email clients (thanks to Litmus <3) and have never had any issues when not declaring height

Defining image heights is necessary when you want to control how email clients display the placeholders while blocking images. I guess this depends on the design and could/should be considered separately for every (hero) image. When image blocking is not an issue, heights could be safely dropped indeed, especially with the Salted template.