Portrait vs landscape images

I need to make portrait vs landscape images fit in the same space. Portrait would need a max width, and landscape a max height I assume.

I’m just debating how to best automatically tackle this with Hugo for now and looking for suggestions from those who might know better.

I assume I’ll need to calculate height and width of the image prior to? As I’ll need that for lazyload anyways. Or can I just cheat it with javascript or css?

This is a HTML/CSS presentation problem, right? Not sure how Hugo can help.

Btw lazy loading is now a browser native thing: https://web.dev/native-lazy-loading/

I don’t think it’s possible extract width/height from an image client side before it’s loaded – and then it’s too later …

But Hugo can provide you with that information, but this has been discussed in many other threads, and is also in the documentation.

Thanks. I’ll search around and see what I can dig up.