html - Resizing img to 100% inside td -
i want set image size 100% inside of td.
<table style="width:100%; max-width:960px; margin:auto;"> <tr style="width:100%;"> <td background="http://source/bg.png"> <img src="http://source/logo.png" style="margin-left:35%;" /> <h1 style="text-align:center;"><a href="#" style="text-decoration:none;color:white;"> text on top of bg-image inside td</a></h1> </td> </tr> </table>
so have big td bg-image , logo on top of text.i doing css in-line able send html email.
the problem image has it's natural size, , doesn't resize 100% fit td size.
firstly, emails pain when comes css / html standards... google here.. in general.. best testing outlook/hotmail/gmail.. outlook 1 of worse supporting html emails.
as code, have @ example instead: http://jsfiddle.net/82bd2fyh/
<table style="width:100%; max-width:960px; margin:auto;"> <tr style="width:100%;"> <td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');"> <img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" /> <h1 style="text-align:center;"><a href="#" style="text-decoration:none;color:white;"> text on top of bg-image inside td</a></h1> </td> </tr> </table>
please note though, background-size supported in css3, ie9+.. otherwise option use normal image tag , stretch 100% position z-index content / div on top of it.
email support guide line: https://www.campaignmonitor.com/css/
the above under assumption talking background image , not logo / img tag.
if mean img tag, apply style it.. believe mean td background image
Comments
Post a Comment