CSS：如何覆盖（取消设置）先前设置的max-width属性值

Question

我有一个图像元素，其样式可以在max-width中定义的绑定参数内缩放到屏幕大小。

这款造型很好用。但是，我想要一些需要在最小屏幕（480px以下）上移除的最大尺寸（百分比）的图像。为此，我需要“取消设置”模板结构设置的元素的max-width值。

HTML：

<figure class='image left'>
     <div class='boxShadowInner wide190'>
           <img src='/images/Bag.jpg' alt='text'>
     </div>
     <figcaption><strong>caption text</strong></figcaption>
</figure>

（boxShadowInner类在图像周围设置羽状边框。）

模板CSS（标准）：

.image.left {
    float: left;
    display: block;
    width: 70vw;
    max-width: 90%;
    padding: 0;
    top: 0;
    margin: 0 auto .5rem;
    text-align: center;
}

模板CSS（最大宽度：480px）：

.tableBox .image.left:not(.carrier) {
    max-width: none;    /** THIS LINE **/
    width: auto;
}
.image.right, .image.left {
    float: none;
}

注意上面的一行;我需要覆盖样式表的基本通用级别设置的max-width属性。

我已经尝试过了：

• max-width: none;由于suggested on this question (for -height)在Firefox中不起作用。

• 唯一能够按预期工作的max-width属性（在Firefox中）是：max-width: max-content;但是stated on MDN：

    

  “这是一个不应在生产代码中使用的实验性API。”

• max-width的其他可能值不做任何更改。

• max-content（和类似的关键字）似乎还没有为生产使用做好准备according to caniuse.com。

• 此规则需要应用多个图像，因此设置值图（280px等）不是一种可能的解决方案。

• 我尝试了max-width: auto;，Firefox告诉我这是一个无效的值。

• !important没有任何区别。

• max-width: initial或max-width: unset也没有任何区别。

我想要实现的目标是：

.image.left {
    float: left;
    display: block;
    width: 90%;
    /* max-width: 90%;     // Disabled */
    padding: 0;
    top: 0;
    margin: 0 auto .5rem;
    text-align: center;
}

Firefox开发人员工具的Screnshot显示，当手动禁用max-width规则设置时，它可以正常工作，但我无法使用CSS规则模拟此行为：

如何覆盖set max-width属性以将其返回到浏览器默认值？

我做了一个小提琴，但它似乎不适合媒体查询.....（我不会使用小提琴，我害怕）

https://jsfiddle.net/b8bsxtqu/7/

Answer 1

对于您的具体情况，这可能不是您所追求的答案，但这就是我接近它的方式。

不是为您的台式机/笔记本电脑编写CSS并为较小的设备进行改造，而是首先为最小的设备编写CSS，然后使用媒体查询来“增强”CSS（使用媒体查询）和大型设备的视觉效果。这就是所谓的移动第一种方法，或者更准确地说小型设备。

发展这种方式的原因。

1. 您从一个更简单的CSS代码库开始。
2. 维护和调试更容易。
3. 让您保持对移动浏览器保持优先权的态度（您最近是否查看了移动使用情况统计信息？Whoa。）
4. 优先考虑内容（应该在哪里）

将此应用于您的情况，而不是“撤消”或“取消设置”小型设备的样式。你的CSS是故意编写的，一开始没有那种风格，因为你首先要为小型设备编写。然后，使用媒体查询开始为更大，更适应的设备添加样式。

在下面的代码段中，您可以看到img没有应用于启动的最大宽度样式。然后，对于最小宽度为480px的设备，您可以指定最大宽度。

img {
  width: auto;
}

@media screen and (min-width: 480px) {
   img {
     max-width: 500px;
   }
 }

<img src='https://placehold.it/900x500' alt='text'>

Answer 2

我发现问题是上面的max-width是在容器上设置的，而不是<img>标记本身，<img>标记有自己的max-和min-width值设置和删除/调整这些已解决此CSS。