Unset width to revert back to inline html attribute "width=XX"

Question

I'm trying to make an image size to whatever the attribute says (width=XX) and not the CSS. That's what the Wordpress Html editor sets when you use the UI drag corner to resize the image to 85 x 30. However, the theme has some css height/width:auto which makes the img go to it's natural dimensions and I can't find a way to 'kill' that CSS so it reverts to the inline one. (Without editing the theme CSS of course)

I tried with width:unset and inherit to no avail. Any ideas?

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */

img{
  width:unset  !important; /*doesn't work*/
  height:unset  !important; /*doesn't work*/
}

<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

Answer 1

Simply add the attribute srcset="" to the image to avoid the first style being applyed and remove the style you added. The idea is to keep only one CSS property to auto (height or width) and the other one will get the value specified on the image and your image will have the desired height/width:

By the way I advice you to specify a correct value to srcset and don't leave it empty

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */

<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

UPDATE

To add more clarifation, specifying width:auto and height:auto override the value specified in the attribute of the image.

And the auto value means The browser will calculate and select a width for the specified element. and then the image will get it's original/default size.

By removing one of the auto value (in this case for the width), the value of the image attribute will be considered again and the other one, since it's always auto, will be calculated by the browser and in this case it will fit the value in the attribute becasue the browser will keep the ratio while calculating, but you can specify any value you want it won't be considered.

Here is a code to show this:

.col img {
  height: auto;
}

.col2 img {
  height: 100px;
}

.col3 img {
  height: 300px; /* 300px will overribe the value in the attribute */
  width:auto; /* auto will override the attribute so the browser will calculate the width by keeping the ratio of the image*/
}

<div class="col">
  <img width="85" height="30" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>

<div class="col">
  <!-- specify a big height value here  -->
  <img width="85" height="300000" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>
<div class="col2">
  <!-- for this one the width is specified in attribute and height in CSS  -->
  <img width="85" height="300000" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>
<div class="col3">
  <img width="85" height="300000" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>

Here is a similar question with more details :

HTML5 - Can I use Width and Height in IMG?