Fix wrong image ratio issues

[markusprograms]

Some of the images on Vexcess academy have wrong size and ratio because they are children of flex divs.

For children of flex elements, the width and height CSS properties don't work in most browsers. To achieve the correct behaviour, you'll have to use min-width and min-height properties instead.

[vExcess]

Oh weird. I've tested the website in Firefox and Chromium and cannot replicate this behavior. Since most browsers are forks of either Firefox or Chromium it should work in them too. The only mainstream browser it might not work in is Safari because debugging Safari is a pain and Safari only runs on Mac and macbooks are severely expensive.

What specific browser are you using? And what operating system and device? And what size are you rendering the page at?

[markusprograms]

I've tested this on Windows 10: Chrome, Edge, Firefox (newest versions) and on Android: Chrome and Firefox. It has the same behaviour on all of these. But it isn't about the browser or the device. It works fine, if you have a large screen (eg 4K or more). For smaller screens, the images reduce their size to free up space for the rest of the elements. Hovewer, they are deformed and look weird.

If you wanted, you can add both width and min-width attributes to the images to make sure it works properly on any screen size.