email - 覆盖最大宽度（或为移动设备放大小图像）

Question

我正在使用 Mailchimp 处理响应式电子邮件，除了必须将最大宽度设置为 160px 的图像之外，所有图像都可以缩小。这在桌面上很好，但在小于 100% 宽度的移动显示器上。

我已经设置了以下内容：

@media only screen and (max-width: 480px) {
    img[class=mcnImage] {
        width:100% !important;

但它仍然太小了。有任何想法吗？

Answer 1

正如我上面的评论所述，可能有几件事可能会合法地阻碍这里的发展。然而，这纯粹是猜测，但考虑一下......

CSS

img[class=one] {
    border: 5px solid blue;
}

HTML

<img src="http://dummyimage.com/50x50" class="one"/>
<img src="http://dummyimage.com/50x50" class="one "/>
<img src="http://dummyimage.com/50x50" class=" one"/>
<img src="http://dummyimage.com/50x50" class=" one "/>
<img src="http://dummyimage.com/50x50" class="one two"/>

在查看小提琴上发生了什么之前，首先看看您是否可以弄清楚应该发生什么（如果您熟悉[]属性选择器）。

认为你明白了吗？看看小提琴。

img[class=term]不仅是不必要的（使用img.term 完美的类选择），而且它只选择其中一个图像。[attr=term]匹配一个完全声明，没有空格或任何东西。我不知道这是否相关，但值得注意。尽管如此。

Answer 2

同意上述评论，您应该遵循这种标准方式来引用元素。但是为了解决您的问题，您可以尝试添加max-width:auto到您的代码中；

@media only screen and (max-width: 480px) {
    img[class=mcnImage] {
        width:100% !important;
        max-width:auto;
    }
}