html - Inline CCS to resize image for mobile in Emails

Question

Trying to use an inline CSS for mobile only in Pardot.

I'm using:

    @media screen and (max-width: 768px) {
        .secondimage {width: 50vw !important;}

Which seems to work in mobile. However Pardot wants to have image height and width:

<img align="left" alt="alt" border="0" class="secondimage" src="image.jpg" style="float: left; width: 259px; height: 288px; border-width: 0px; border-style: solid;" width="259">

In mobile Outlook the image has a correct ratio, but in Gmail the image is following the height in pixels and squishing it to 50% of the viewport width. How can I get it to render in the correct ratio everywhere?

Answer 1

Add height:auto in your media query style.

@media screen and (max-width: 768px) {
  .secondimage {width: 50vw !important; height:auto !important; }
}