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

【问题标题】：Overriding max-width (or scaling up a small image for mobile)覆盖最大宽度（或为移动设备放大小图像）
【发布时间】：2013-03-13 04:56:36
【问题描述】：

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

我已经设置了以下内容：

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

但它仍然太小。有什么想法吗？

【问题讨论】：

img[class=mcnImage]?做img.mcnImage。 . 是一个类选择器。你也应该只在曾经需要|important 时谨慎使用。您是否阅读过有关如何计算选择器优先级的文章？
Specificity.

标签： email mailchimp css

【解决方案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] 匹配一个完全声明，没有空格或任何东西。我不知道这是否相关，但值得注意。尽管如此。

【讨论】：

【解决方案2】：

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

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

【讨论】：