Override images from getting height+width from CSS

问题:

I have a universal style applied to avatars, but in this situation I want to override that to get height and width from the html attributes.

   <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;
 }

I don't want to change any html, just CSS... is there any way to do this? I tried auto, but that makes it its natural height and width.

回答1:

I'm not entirely sure what you're asking or what you mean by get the width and height from html attributes.

The only thing I can share is that using auto you get the initial width and height, determined by your browser

Or you can use !important after each css attribute to make sure it overrides everything.

Or by using css inline with style="width:##;height:##" that will override the CSS sheet (but not !important attributes).

I'm not sure if this helps.