CSS：在最大宽度和最大高度的响应img中保持纵横比

Question

_{（在stackoverflow上已经提出了类似的问题，但这个问题有更多的限制，例如特定的最大宽度、最大高度、所需的特定高度和宽度，并且没有布局偏移。）}

我想要一个具有以下约束的响应图像：

• 最大宽度：100%，这样它就不会溢出到右侧，并且在减小屏幕宽度时会有响应

如何使用CSS实现这一点？

（如果CSS无法实现这一点，那么可能是在JavaScript中？）

我尝试了几个CSS功能，例如对象适合度和最大宽度：100%等，但在尝试修复另一个约束时，我总是发现至少一个约束失败。例如，当屏幕尺寸减小时，对象拟合会在图像尺寸减小时为图像创建边距/填充，就像图像边界没有减小一样。以下代码对此进行了演示：

https://codepen.io/Devabc/pen/mdVvyKq

css prettyprint-override">/* Should appear to the right of the Wombat */

.beside {
  float: left;
  background-color: lightgreen;
  border: 1px solid;
  height: 200px;
  width: 100px;
}


/* Should appear below the Wombat */

.below {
  background-color: red;
  border: 1px solid;
  width: 100px;
  height: 300px;
  clear: both;
}

img {
  display: block;
  float: left;
  max-width: 100%;
  max-height: 200px;
  border: 1px solid;
  
  /* Without this, aspect ratio is not normal. 
But with this, it creates an unwanted margin. */
  object-fit: scale-down;
  object-position: left;
}

<img 
height="533" 
width="799" 
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" 
/>

<div class="beside">This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.</div>

<div class="below">This text should be directly below the Wombat, without any margin between this and the Wombat. 
The dimensions of the original Wombat img are:
width: 799px, height: 533px</div>

（绿色文本应该位于袋熊的右侧，没有边距。但对象匹配会导致填充/边距与原始图像的长度一起出现。）

感觉这在CSS中几乎是不可能的，尽管现在这些要求不应该太高，因为响应性设计很重要。

我如何用HTML/CSS解决这个问题？