OL Learn

Dynamic Images with different image sizes

I would like to dynamically select images with a script based on a value located in a index field.
The value in the index field will be a number and based on the number a specific logo needs to be used. For each logo there are multiple numbers or ranges of numbers that should use the logo.

My thoughts are to use a script, but the logos are different sizes (height and width), but the general amount of real estate is fixed. Is there a method to set the height and width or to auto-set so the size is constrained to the general amount of open real estate while remaining dynamic?

I suggest to set the image as background-image of the container (assuming there is something like a div wrapping the image) and set the background-size property to cover. The size of the div defines the real estate and the ‘cover’ option will scale the image to cover the div (so it may clip parts of the image).