样式<img/>从HTML属性中读取维度，而不是CSS

Question

一旦width或height属性被CSS篡改，您如何取消这些样式并告诉图片再次从其HTML属性中读取尺寸？

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

img {
  height: 200px;
}

/* ... */

img {
  height: auto;
}

它只会使图像完全忽略其HTML属性。

Answer 1

我担心不可能以这种方式取消CSS规则，以使元素回退到其HTML表示属性。这是因为presentational attributes are mapped to CSS rules with precedence so low that even a CSS rule with a * selector will permanently override them。

将属性设置为其初始值本身并不会取消任何内容;它只是创建一个规则，将其设置为规范所声明的默认值，并像任何其他规则一样参与级联。在这种特殊情况下，设置height: auto不起作用，因为它所做的一切都是覆盖最初由HTML属性和之前的CSS规则提供的值......好吧，auto。< / p>

我能想到的一个可能的选择是使用JavaScript从文档的样式表中删除有问题的声明，但我不确定它是否真的有效 - 我还没有尝试过。

Answer 2

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

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

如果图片具有:not或width属性，则会使用height“不”应用它。你可以see results in this fiddle。这意味着您始终希望属性优先于上述CSS。然后，如果您确实想通过CSS应用更改，则需要将类或其他内容应用于img，如下所示：

<img src="blah" class="specialCase" />

img.specialCase {
    height: 200px;
}

哪个取代height但width次设置as this fiddle shows。

Answer 3

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

example jsfiddle

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