无法用 css 覆盖 html 中的直接属性

哈米德·米奈

我正在做一个大项目来改进它，就像任何其他现有项目一样，我有一些限制，我需要为它找到解决方法，尽管这可能不是最好的选择。我在数据库中有一些文本，其中一些包含图像标签，例如

<img src="http://www.cbc.ca/kidscbc2/content/the_feed/_848/april_fool_848.jpg" width="20" height="8"  />

现在的问题是这些图像具有宽度和高度属性，我根本不需要它们，我需要使用自己的样式。我知道有不同的方法可以修复，例如清理 db 文本或解析文本并在将其包装为 html 之前清理它，但基于我的一些限制，这些方法现在对我来说是不可行的。所以我需要在 css 中做到这一点：

只是为了给你一个我想要的简单版本，这里有一个简单的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
img {
width: 100% !important;
height: 100% !important;
  }
 </style>
 </head>
 <body>

 <div style="width: 200px; height: 300px;background-color: yellow;">

    <img
src="http://www.cbc.ca/kidscbc2/content/the_feed/_848/april_fool_848.jpg"
        width="20" height="8" />

 </div>

如您所见，我什至使用 !important 为 img 添加了样式以覆盖样式。但是，直接属性仍然生效。任何想法？

约翰尼斯

它在这里工作 - 您的图像 src 地址中只有一些空间：（并且缺少结束body和html标签）。

img {
  width: 100% !important;
  height: 100% !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>

</head>

<body>

  <div style="width: 200px; height: 300px;background-color: yellow;">

    <img src="https://s3.amazonaws.com/telegraph_journal/story-pictures/100141831/leadlandscape/20170303_083808_1.jpg" width="20" height="8" />

  </div>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。