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"/>

在看到小提琴上发生的事情之前，首先看看你是否可以找出应该发生的事情（如果你熟悉[]属性选择器）。

认为你懂了吗？查看fiddle。

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;
    }
}

覆盖最大宽度（或放大移动的小图像）

2 个答案: