JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Without contain:size
</p>
<img src="https://placehold.it/300x100" style="width: 100px; aspect-ratio: 1/1">

<p>
With contain:size
</p>
<img id="withsize" src="https://placehold.it/300x100" style="width: 100px; aspect-ratio: 1/1; contain:size">

<p>
<div id="stats">

</div>
</p>

CSS

img {border: 1px solid black;}
#stats {border: 1px solid blue;}

JavaScript

window.onload = function () {

stats = document.querySelector("#stats");
withsize = document.querySelector("#withsize");
stats.innerHTML = "with contain:size stats<p> width: " + withsize.width + " height: "+ withsize.height;

}