AC
0
Responsive Images max-width Property
Hi, I designed a responsive email with several elements each one with a main image.
I have set:
img { max-width: 320px !important; height: auto !important; }
To prevent that images breaks in iphone resolution and higher but then, images that are smaller than 320px scale to this width, so I fixed it with:
img { max-width: 100% !important; width: auto !important; height: auto !important; }
This works for element´s main images but then, the business logo resizes to 100% of its parent container. ¿How I get the best of each solution?
for responsive images here's what I do.
<img src="image.jpg" width="600" style="display:block;width:100%;max-width:600px" />Modern email clients will look at the css stylings for scaling and ignore attribute values. Older clients like outlook and lotus notes (except Lotus Notes 8) will look at the attribute value.
Here is the Litmus test.
The alternative here would be to target specific images using classes instead of using a catch-all.
<img src="image.jpg" width="600" class="responsive" />then in your css you could put:
*[class="responsive"] {width:100%!important;}Such an elegant solution, this worked a treat even 6 years later! Thank you :)
Thanks a lot for your work sir!
This is something I haven't seen so far, and yet it is so simple. Good work!