样式用于<img>从其 HTML 属性(而不是 CSS)读取维度

Question

一旦width或height属性通过CSS被篡改，如何取消这些样式并告诉图像再次从其HTML属性中读取维度？

width和height的初始值为auto，但显式设置不起作用：

img {
  height: 200px;
}
/* ... */
img {
  height: auto;
}

它只会让图像完全忽略它们的HTML属性。

Answer 1

如果您可以访问在img上设置height的初始CSS，那么对于CSS3浏览器，您可以将其修改为：

img:not([width]):not([height]) {
    height: 200px;
}

如果图像具有width或height属性，则使用:not"不"应用它。你可以在这把小提琴上看到结果。这意味着您总是希望属性优先于上面的CSS。然后，如果您真的想通过CSS应用更改，您需要将一个类或其他东西应用到img，如下所示：

<img src="blah" class="specialCase" />
img.specialCase {
    height: 200px;
}

它否决了height而不是width的设置。

Answer 2

恐怕不可能通过这种方式取消CSS规则来使元素返回到其HTML表示属性。这是因为表示属性被映射到优先级很低的CSS规则，即使是带有*选择器的CSS规则也会永久覆盖它们。

将属性设置为其初始值并不会从本质上抵消任何东西；它只是创建一个规则，将其设置为规范规定的默认值，并像其他规则一样参与级联。在这种特殊情况下，设置height: auto不起作用，因为它所做的只是用…重写HTML属性和以前的CSS规则最初提供的值。。。嗯，auto。

我能想到的一个可能的替代方案是使用JavaScript从文档的样式表中删除有问题的声明，但我不确定这是否真的有效——我还没有尝试过

将宽度和高度设置为initial确实会导致原始图像大小，不幸的是，这似乎仅限于Webkit(Chrome/Safari(。

示例jsfiddle

img {width: 50px;height: 50px;}
img {width:initial;height:initial;}

​