#container {
background-color: grey;
width: 70vw;
height: 70vh;
}
img {
background-color: blue;
max-width: 33%; /* this % is width-based because of the css property width */
max-height: 33%; /* this % would be height-based because of its use in the css property height. How can this have the same value as the 33% used for max width? */
}<div id="container">
<img width="300" height="200"> <!-- w and h attributes should to original image size -->
</div>See code comments. Result should be as if I used background-size: contain with height: auto and aspect-ratio: 1. But without using css backgrounds.