How to implement adaptive image resizing?

Question

css

Good afternoon.
Google didn't help.
Task:
Given a URL to a random image, using css to fit it into the screen without losing proportions.
Specifics:

<div style="width: 100%; height:100%">
   <img src="рандом">
</div>

Everything refers to two options:

.widthScale { 
  max-width: 100%; max-height: 100%; width: 100%; height:auto
}
.heightScale {
  max-width: 100%; max-height: 100%; width: auto; height:100%
}

And how not to occupy the proportions of the screen and the proportions of the picture to fit / stretch it while maintaining the proportions.

Answer 1

Just

div {
  max-width: 100%;
}