Auto sizing image on page

[Kevin E.]

Hello. I am attempting to build a site using the Hero Light template. The problem is when the page is resized, the header image stays the same and reveals the grey box to the right. Can anyone share what I need to change in the html or css so that the image will move with the window edge?

[osgood_]

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.

[Nancy OShea]

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.

Source: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

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.