CSS overriding width and height attribute. Why? [duplicate]

问题

This question already has an answer here:

The difference between specifying image size in html or css (1 answer)

Closed 3 years ago.

When I have an image with attributes width and height my css is overriding these attributes but if I have inline-styles with width and height my external css doesn't override the inline-styles. Why?

Example code without added CSS:

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Example code with added CSS:

.pic {
  width: auto;
  height: auto;
}

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Example code with inline style:

.pic {
  width: auto;
  height: auto;
}

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width: 100px; height: 100px" />

回答1:

For override a property like "width" used directly in the html tag on this way "div style="width: 100" is necessary that you put !important after your css code, for example something like this:

.pic {
   width: auto!important;
   height: auto!important;
}

来源：https://stackoverflow.com/questions/37952824/css-overriding-width-and-height-attribute-why