Auto sizing image on page

If you stretch your banner image to fit the available viewport, it will appear distorted on ultra-wide displays. Conversely, a large banner image will consume too much bandwidth on mobile devices.

SOLUTION:  SVG files. The two-fold advantage of math-based vector graphics is:

1) smaller file size,

2) SVGs can be rescaled to fit any size required without quality loss.

Pixel-based images can't do that.

Whenever possible, I use SVG files for non-photo web graphics. 

Adobe Express has a free SVG converter tool below.

https://www.adobe.com/express/feature/image/convert/svg 

<style>

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

</style>

Hope that helps.

You need to set the image to 100% width, which should then force it to consume the width of its parent container, although doing this could cause the image to lose some quality.

In my opinion it's better to use a larger width image and set it to have a max-width: 100%; That way it can never grow wider than its parent container.

As with all things, it's not quite that simple if done correctly one should be using a series of different sized images for different devices, that way you can deliver smaller images on smaller devices and  bigger ones on bigger devices.