Response images with max-width

A child with width greater than its container's width overflows:

Setting max-width: 100% causes a child to become no bigger than its parent:

But if the parent is bigger than the child, the child will expand to its actual width:

Why not set width: 100% instead? Because the the image will stretch and be too large and distorted in big containers: