Question

我添加了一个具有宽度和高度属性的图像，但它们被css类覆盖。这堂课无法改变，因为它来自一个图书馆，我会破坏大部分造型。解决方案是设置样式属性，但我不能，因为图像来自编辑器（tinyMCE）。

如何使当前的两个css属性无效或使用图像属性覆盖它们而不使用jquery？其他解决方案也欢迎。

谢谢

来自编辑的

html片段：

 <img src="https://crossbrowsertesting.com/design/images/cbt-sb_logo.svg" alt="" width="422" height="69">

来自调试器的样式：

md-card > img, md-card > :not(md-card-content) img {
box-sizing: border-box;    
display: -webkit-flex;    
display: -ms-flexbox;    
display: flex;    
-webkit-flex: 0 0 auto;    
-ms-flex: 0 0 auto;    
flex: 0 0 auto;    
width: 100%;    
height: auto;
}

img[Attributes Style] {    
width: 422px;    
height: 69px;
}

如上所述，我无法更改html代码段，因为它是从编辑。此外，图像大小也会动态设置

Answer 1

让我们说你的形象是

<img src="/imgs/test.png" class="imgTest" alt="img"/>

然后在你自己的.CSS文件中，你可以给它一个！important的属性，就像这样。

.imgTest 
{
   width: 20px !important;
   height: 30px !important;
}

答案（伪代码）：使用Javascript解决方案

var x = document.getElementsByClassName("example");
  for (var i = 0; i < x.length; i++) {
    x[i].style.width = "10px";
    x[i].style.height = "10px";
  }

jsfiddle.net/0yfxpqwz

Answer 2

一个简单的解决方案是在预定义的css库之后包含一个外部css，这样你的css就会比预定义的css有更多的优先权。即：

sqrt()

删除覆盖css没有jQuery

2 个答案: