我的房地产团队正在将我们的数据库集成到新的CRM系统中，并且我们的电子邮件签名不具有移动响应能力。在横向模式下，社交媒体图片正确显示。在纵向模式下，表格可以正确堆叠，但精灵会拉伸到容器的宽度。
我们雇用了一个外部小组来开发系统，我们不能仅修改签名上的HTML源代码来修改CSS代码。我们可以对HTML进行任何修复，还是可以建议开发人员使外观保持一致？我是办公室中最懂计算机的人，被赋予寻找答案的任务。
感谢Munni's help below，图像至少清晰但巨大。现在，我们离在移动显示器上说得通的一点了。结果请参见下图。
Full Source Code
[
<html>
<head>
<title></title>
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
</head>
<body aria-readonly="false">
<p> </p>`
<div class="wrapper" style="margin: 0px;max-width: 680px;min-width: 200px;background: #fff;text-align: left;">
<div class="email-container" style="background: white;font-family: sans-serif;margin: 0 auto;overflow: hidden;">
<div class="accentline" style="margin: 0px;font-size: 28px;font-weight: 400;color: #fff;line-height: .33;text-align: center;margin-bottom: 0px;background: black;"> </div>
<div class="accentlinediamond" style="margin: 0px;font-size: 28px;line-height: .75;text-align: center;margin-bottom: 5px;width: 200px;background: #fff;margin-left: 0;color:#93f542;">▼</div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="row" style="padding: 0px;" width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="deviceWidth" style="padding-right: 10px; width: 150px;"><a class="userphoto" href="http://www.realvolve.com" style="width: 150px;text-align: center;"><img alt="" class="unique-inline-img-class" dir="" document_id="337728" id="" lang="" longdesc="" src="https://realvolve-production.s3.amazonaws.com/message_templates/879660270d928312088b/Headshot_5.jpg" style="width: 150px; height: 150px; float: right;" title="" /></a></td>
<td class="deviceWidth" style="padding: 0px;">
<div class="signature-name" style="margin: 0px;font-size: 26px;font-weight: 600;color: #000;line-height: 1.00;text-align: left;margin-top: 5px;margin-bottom: 2px;"><span style="font-size:16px;">[[CurrentUser#FirstName]] [[CurrentUser#LastName]]</span></div>
<div class="signature-team" style="margin: 0px;font-size: 22px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[TeamName]]</div>
<div class="signature-company" style="margin: 0px;font-size: 22px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[CurrentUser#Company]]</div>
<div class="signature-phone" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">c: [[CurrentUser#CellPhone]]</div>
<div class="signature-phone" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">o: [[CurrentUser#WorkPhone]]</div>
<div class="signature-link" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;"><a class="signature-link" href="mailto:[[CurrentUser#EmailAddress]]" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[CurrentUser#EmailAddress]]</a></div>
<div class="signature-link" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;"><a class="signature-link" href="[[CurrentUser#Website]]" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[CurrentUser#Website]]</a></div>
</td>
</tr>
<!––Part of source code that houses the social media sprites, not sure if other code effects the display properties––>
<tr>
<td class="deviceWidth" colspan="2" style="padding-right: 10px; width: 100%; text-align: center;"><a href="https://www.facebook.com/ParkerPHXRealEstate/" target="_blank"><img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/facebook.png" style="max-height: 32px;max-width: 32px" width="32" /></a>
<a href="https://www.youtube.com" target="_blank"><img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/youtube.png" style="max-height: 32px;max-width: 32px" width="32" /></a>
<a href="https://www.linkedin.com/in/parkerw" target="_blank"><img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/linkedin.png" style="max-height: 32px;max-width: 32px" width="100%" /></a>
<a href="https://www.instagram.com/houses_and_bikes" target="_blank"><img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/instagram.png" style="max-height: 32px;max-width: 32px" width="100%" />
</a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
我们希望社交媒体图标在纵向或横向模式下正确显示。请参阅图像以查看问题。我们可以更改代码中的任何内容以获得所需的结果吗？
最佳答案
您需要在社交媒体图像中放置准确的height和width而不是max-height和max-height。我已经修改了您的代码，这里是链接https://jsfiddle.net/jhqdbeog/3/