html - 样式从其 HTML 属性读取尺寸，而不是 CSS

Question

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

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

img {
  height: 200px;
}

/* ... */

img {
  height: auto;
}

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

Answer 1

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

将属性设置为其初始值并不会固有地取消任何东西。它只是创建一个规则，将其设置为规范规定的默认值，并像任何其他规则一样参与级联。在这种特殊情况下，设置height: auto不起作用，因为它所做的只是覆盖最初由 HTML 属性和之前的 CSS 规则提供的值......好吧，auto.

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

Answer 2

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

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

:not如果图像具有 awidth或 aheight属性，它使用来“不”应用它。你可以在这个 fiddle 中看到结果。这意味着您总是希望属性优先于上述 CSS。然后，如果您真的想通过 CSS 应用更改，则需要将类或其他东西应用到img，如下所示：

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

img.specialCase {
    height: 200px;
}

这会否决height但不是此小提琴显示width的设置。

Answer 3

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

示例 jsfiddle

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

​</p>