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

【问题标题】：CSS, how to size an img back to its width attributeCSS，如何将 img 的大小调整回其宽度属性
【发布时间】：2014-08-25 14:15:02
【问题描述】：

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

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

这是样式：

img {
width: 100%;
}

如何在不更改标记或不知道其尺寸的确切值的情况下使用 CSS 返回其 “伪初始值”。

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

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

谢谢。

【问题讨论】：

为什么要设置要撤消的样式？（我对潜在的答案很感兴趣，但这似乎是一个自我创造的问题。）
你可以设置max-width: 200px;。
不确定您的意思。原始分辨率是 200 x 200 还是在 HTML 中设置为 200 x 200 但实际上大小不同？无论哪种方式，您都应该从 HTML 中删除高度和宽度属性并使用 CSS 完成所有操作
@DavidThomas 你说得对，这是一个自我创造的问题。因此我可以在 normalize.css 中使用 :not 伪类，但现在的方式是 HTML 属性是通过后端设置的。在大多数情况下，这些都是正确的（显示尺寸不是图像的像素）。但是布局很疯狂。图像在所有地方都调整了大小。我想知道无论我以前做什么，是否有可能让它们恢复到那些属性。
不幸的是 unset 和 initial 不起作用。

【解决方案1】：

所以我猜想完成这项工作的唯一方法是不要覆盖你想要使用 :not() 的那些。

【讨论】：

【解决方案2】：

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

使用 javascript 设置此内联规则：

width: 100%;

然后再次使用js覆盖为：

width: inherit;

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

【讨论】：

【解决方案3】：

您不能使用 CSS 更改 HTML 样式。

【讨论】：