Harmonious display of logos with JavaScript

whether references, partners or customers - there are many cases where you want to display several logos next to each other in a harmonious way. the proportions of the logos are usually not uniform. often you follow your gut feeling when it comes to the size representation in the design, but there is also an exact calculation method of a visually appealing representation by equating the areas of the logos. in the following example, this can be done with a few lines of JavaScript.


If you equate the height, you get the following appearance:

CodePen

If you do the same procedure with the width, the following illustration results:

CodePen

Better is the equalization of the area with the help of a few lines of JavaScript:

1dacb229fcfb428ee3cb6b414625be29

This gives the following picture:

CodePen

Back