覆盖从 CSS 获取高度+宽度的图像，而不是 html 属性答案

【问题标题】：Override images from getting height+width from CSS, html attribute instead覆盖从 CSS 获取高度+宽度的图像，而不是 html 属性
【发布时间】：2015-02-02 02:27:48
【问题描述】：

我有一个应用于头像的通用样式，但在这种情况下，我想覆盖它以从 html 属性中获取高度和宽度。

   <img src="http://site.com/wp-content/uploads/avatars/4/21b534c3f0db3355775089689cb4e003-bpthumb.jpg" class="avatar user-4-avatar avatar-14 photo" width="14" height="14" alt="Avatar of user">

img.avatar {
   height: 80px;
   width: 80px;
 }


.bbpress img.avatar, .forum img.avatar {
   /*what rule do I put here to make the avatar use the html attribute for sizing?*/
   height: auto;
   width: auto;
 }

我不想更改任何 html，只是 CSS...有什么办法可以做到这一点？我试过auto，但这使它成为自然的高度和宽度。

【问题讨论】：

请添加您的html。
不要成为一个绝对主义者，但我建议避免 HTML 属性，样式应该在你的样式表中，而不是你的语义 HTML 文档中。此外，一旦您开始应用 CSS 样式，它们就不能被 HTML 样式元素覆盖。
据我所知，在 CSS 中没有办法做到这一点，因为标记中的宽度/高度/边框/等属性总是会被相同类型的 CSS 属性覆盖。真正做到这一点的唯一方法是通过 Javascript，根据属性值设置 CSS 样式。 stackoverflow.com/questions/9770818/…
顺便说一句，使用 CSS 重新调整图像大小时要小心...浏览器通常做得很差。
检查你的 css/html 看不出为什么做了什么不起作用。使用检查器检查什么被什么继承。如果将 auto 更改为像素宽度，它会起作用吗？

标签： html css image height

【解决方案1】：

我不完全确定你在问什么，或者你从 html 属性中获取宽度和高度是什么意思。

我唯一可以分享的是，使用 auto 可以获得由浏览器确定的初始宽度和高度

或者您可以在每个 css 属性之后使用 !important 以确保它覆盖所有内容。

或者通过使用带有 style="width:##;height:##" 的 css 内联，这将覆盖 CSS 表（但不会覆盖 !important 属性）。

我不确定这是否有帮助。

【讨论】：

我意识到我的 img 标签没有正确编码所以它没有显示出来.. 编辑所以问题现在应该更清楚了