<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#cccccc" >
<tr>
<td>
<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<div class="no-webkit">
PNG:
<img src="https://dev.learningpeople.co.uk/imgs/the-learning-people-logo.png" alt="The Learning People" />
</div>
<!--[if !mso 9]><!-->
<div class="is-webkit" style="display:none; max-height:0px; overflow:hidden;">
SVG:
<img src="https://dev.learningpeople.co.uk/imgs/the-learning-people.svg" height="66" width="195" alt="The Learning People" onerror="this.onerror=null; this.src='https://dev.learningpeople.co.uk/imgs/special-offer-windmills.jpg'"/>
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 500px){
.is-webkit{
display: block !important;
max-height: none !important;
}
[class="no-webkit"]{
display: none !important;
}
body{
background:red;
}
}
@media all and (-webkit-min-device-pixel-ratio:1.1) {
.is-webkit{
display: block !important;
max-height: none !important;
}
[class="no-webkit"]{
display: none !important;
}
body{
background:blue;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.