CSS，如何将img的大小调整回其宽度属性

Question

我在标记中有一个具有宽度和高度属性的图像参考。

<img src="//example.com/img.jpg" width="200" height="200" alt="" />

这是风格：

img {
width: 100%;
}

如何使用 CSS 恢复其“伪初始值”，而不更改标记或不知道其尺寸的确切值。

我尝试使用 width: auto; 但它显示的是图像的实际尺寸，而不是属性设置的尺寸。

我知道这些也有点 CSS。但是CSS中有没有办法做到这一点呢？ 还有一个 codepen 示例，您可以在这里使用： http://codepen.io/anon/pen/xrFml

希望我想做什么很清楚。 :-)

好的，谢谢。

Answer 1

我发现了同样的问题但没有解决方案： 覆盖图像从CSS获取高度+宽度，而不是html属性

还有一个类似的： 停止 CSS 覆盖 HTML 宽度属性

所以我猜想完成此任务的唯一方法是不要覆盖那些你想返回使用 :not() 的内容。

Answer 2

首先删除工作表的 img 规则。 如果你想使用 dom attrs 让我们使用 dom attrs，你应该使用内联样式来实现这一点。

使用javascript来设置这个内联规则：

width: 100%;

然后再次使用js覆盖为：

width: inherit;

这使得元素再次级联回到其 html 的“width”属性

Answer 3

在 2023 年，有一个关键字

revert-layer

可以将值恢复到之前的级联层，在大多数情况下是用户代理。由于浏览器的用户代理根据图像的大小属性将外部

width

、

height

和

aspect-ratio

应用于图像，因此

revert-layer

会完全恢复到原来的状态。

但是，问题是，根据 支持表，除 Firefox 之外的浏览器显然不支持它。尽管它在我今天尝试过的最新基于 Chromium 的浏览器中仍然有效。

Answer 4

您无法使用 CSS 更改 HTML 样式。