These days when you create a web page or email newsletter, you need to know how to make it responsive. This essentially means that the width of the page/email is not hard-coded (although a max-width is fine), but instead is set to a fluid value—usually 100%—so that it completely fills the width of the device.
Similarly, image sizes need to be set so that they will also scale properly according to the width of the device. The CSS I recommend:
The height declaration is essential. Often mail apps or web browsers will determine the native size of an image and set the height and width based on that, so if you don’t do anything, you will end up with a squished or skewed image.
Note that you can adjust the width to whatever you want. Sometimes 100% is too much, so I will add in some margins. If you like to use the golden ratio like I do, that would be:
width:62%; margin:0 19%; height:auto;