如何在图像加载html之前防止方形图像块

Question

问题：尤其是在Outlook中，在加载图像之前，电子邮件会插入一个与图像宽度相等的方形块。对于我的电子邮件，我有一个横跨电子邮件宽度的图像，但它的高度只有325像素。相反，它预览了一个650px x 650px的块。有没有任何方法可以在没有Javascript的情况下，在加载图像之前阻止方形块的显示？

代码：

<table width="650" height="325" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="#" width="100%"/>
</td>
</tr>
</table>

Answer 1

您可以将原始尺寸作为width和height属性赋予图像。

为了确保图像保持响应，您可以在图像中添加以下样式：

<img src="#" width="650" height="325" style="max-width: 100%; height: auto;" />

max-width: 100%;确保图像不会超过父元素的宽度。

height: auto;将根据给定的图像尺寸自动将高度缩放为宽度。