How to autofit image in container with constant aspect ratio using only CSS

To ensure we autofit image in a container with constant aspect ratio

Another solution would be to use object-fit. It specifies how an image or video element should be resized to fit its container.

If you use object-fit: cover; it will cut off the sides of the image, preserving the aspect ratio, and also filling in the space:

follow the procedure below to achieve the result:

#box {
   width:100%;
   height:100%;
}

#box img {
width :100%;
}