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

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.

enter image description here

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?

Tags:

Css

Wordpress

Recent Posts