样式< img>从HTML属性读取维度，而不是CSS [英] Style <img> to read dimensions from its HTML attributes, not CSS

问题描述

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

Once width or height properties have been tampered with through CSS, how do you cancel those styles and tell images to read dimensions from their HTML attributes again?

width 和高度的初始值是 auto ，但显式设置不起作用：

The initial value of width and height is auto, but setting it explicitly doesn't work:

img {
  height: 200px;
}

/* ... */

img {
  height: auto;
}

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

It will just make images ignore their HTML attributes completely.

推荐答案

如果你可以访问初始的CSS，设置 height $ c> img ，那么对于CSS3浏览器，您可以修改为：

If you have access to the initial CSS that sets the height on the img, then for CSS3 browsers, you can modifiy it to this:

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

它使用：not width 或 height 属性，则c> tonot您可以查看此小提琴的效果。这意味着您始终需要一个属性优先于上述CSS。然后，如果你真的想通过CSS应用一个更改，你将需要应用一个类或某事到 img ，像这样：

It uses the :not to "not" apply it if the image has either a width or a height attribute. You can see results in this fiddle. This implies that you always want an attribute to take precedence over the above CSS. Then, if you actually want to apply a change via CSS, you would need to apply a class or something to the img, like so:

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

img.specialCase {
    height: 200px;
}

但不是 width 设置此小提琴显示。

这篇关于样式< img>从HTML属性读取维度，而不是CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！