To automatically adjust height to variable width,
you can use "padding-bottom:(width-height-ratio%)" trick.
But what about automatically adjusting width to variable height?
You need 1x1 pixel gif or svg to so so.

In the following example, you will have a square.
Change the width of your browser to see how the rectangle moves.

The container's height must be fixed for Safari and FF.
This requirment is the same as SVG.
Whether we use image or SVG, we'll encounter the fixed height-requirement
for safari and FF. So it's not that image is better than SVG.
Just use SVG rather than image becuase unlike image, SVG doesn't need
an external file.

Hello World

This is a test