email - 覆盖最大宽度(或放大移动设备的小图像)

Question

我正在使用 Mailchimp 处理响应式电子邮件，所有图像都可以正常缩小，但必须将最大宽度设置为 160 像素的图像除外。这在桌面上很好，但在宽度小于 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"/>

在查看 fiddle 上发生了什么之前，首先看看您是否能弄清楚应该发生什么(如果您熟悉 [] 属性选择器)。

你觉得你明白了吗？查看fiddle .

img[class=term] 不仅是不必要的(使用 img.term 选择类 非常完美 )，但它只选择了一个图像。 [attr=term] 完全匹配语句，没有空格或任何东西。我不知道这是否相关，但值得注意。尽管如此。