How to make images responsive in Email With CSS

In this tutorial, we are going to learn about how to makes Email images responsive in all devices with CSS.

Yesterday, I have sent an email newsletter with an image at that time images are become unresponsive in mobile phones so that I have solved this problem by using the 3 lines of CSS code.

Responsive Images in Email

To make a image resposive in email, we need to the set the html <img> element styles to a height:auto and width:100% , max-width:700px;.

Example:

<!-- <html-code> -->
<img src="https://myimageurl.com/rose.png"
    style="height:auto; width:100%; max-width:700px;">

Now our image becomes responsive in all devices because it shrinks the image whenever the device size becomes less than 700px.