Html CSS响应图像元素

嗨，我正在尝试创建一个响应电子邮件模板

我无法使背景图像响应

以下是图像代码的示例：

a#标志{
显示：块；
背景大小：100%100%；
宽度：171像素；
高度：119px；
背景：url（'http://tophitechgadgets.com/wp-content/uploads/2013/11/logo3.png")不重复;；
利润率：14px自动；
}

此外，我想问一些想法，使它看起来完美的网站

演示：

谢谢你看这个：

---

你会发现你想要达到的目标即使不是不可能也很难。后台大小为css3，电子邮件客户端不广泛支持。您可能需要做不同的操作。

许多电子邮件客户端不支持css3，因此您无法使用背景大小，为什么不在其中添加图像呢？如果需要在其顶部放置元素，请将其绝对定位。

无论在哪里使用背景图像，请确保元素的

宽度
为
100%
而不是
600px
，并使用
背景位置：居中
正确定位图像。我可以用这种方式修复你的大部分图像

您需要删除当前设置了背景/背景图像属性的所有元素，并用
元素替换相应的元素，需要将其宽度设置为
100%
，并将其放置在具有定义宽度的包含元素中，图像可用于参考-作为响应模板，我猜此容器应具有
%
宽度

这就是说，您还没有明确您对“响应性”的期望是什么，上述方法将适用于简单的宽度%大小调整，如果您希望在调整大小时堆叠或溢出，这是不同的，需要更多的工作，这可能在收件者电子邮件客户端中受支持，也可能不受支持。我再说一遍，看一看。和以往一样，当涉及HTML电子邮件时，我的建议是保持简单并坚持使用有效的方法。例如，一个固定模板，包含尽可能小的图像（kb大小），使用尽可能简单的DOM-这将防止出现这样一种可怕的场景：一个设计对您来说很好，但对每个收到它的人来说都很糟糕

注意。鉴于fiddle中提供了大量代码，您可能希望对问题进行细分，因为恐怕不太可能有人为您重构整个模板。
您能否澄清您对“响应性”的期望？我建议你现在就看，问题太广泛了，我指的是背景图片。我的JSFIDLE代码中有几个背景图像，我想知道如何使它们响应。如果有办法，你可以检查那里的代码，看看哪里出了问题，为什么图像没有响应流体。这包括我的a#logo、.divider、a#learn more等。这就是你的意思：？图像（包括logo、learn more、banner）仍然没有响应。有没有办法检查JS fiddle上的代码？使图像具有响应性？这样我就可以检查出哪里出了问题？演示：您通常如何测试响应性站点？这和电子邮件的原理是一样的——使用网络浏览器是的，但我的问题是图像的响应速度越来越快。有没有办法检查JS FIDLE上的代码？使图像具有响应性？这样我就可以检查出哪里出了问题？演示：jsfiddle.net/nLxjU/2发现背景位置有一些错误：center；不过，我还有最后一个问题是“a.btn”（查看我们网站优惠券下方的“了解更多”按钮），为什么即使我添加了一个利润率顶部也不移动？？你介意检查一下吗？它不动了，因为边距正在缩小。添加
display:inline块
，应该可以解决这个问题。