How to make an image responsive in HTML email regardless of image size

Question

I am creating an email template where my container has a max-width: 600px. I want to be able to upload images that are in excess of 800px wide, and the images to scale down

Answer 1

Been breaking my head over image width in emails for a day now. Finally got it to work in a "responsive" manner...somewhat. What I found is that, while some email clients will ignore CSS for tags (at least CSS for width and max-width) and set the image to its full width, most of them will actually respect the width attribute set directly on the . So this is what I did:

And then:

.logo {
    display: block;
    width: 310px !important;
    max-width: 100% !important;
}

Clients that respect the CSS, will use CSS for the image, while clients that ignore it will just have width set to 250px, so that image doesn't break the layout for different screensizes.