As it stands, the default background-size property from the gallery component in the achievements section, which is set to cover, is the only fit option for images. Which makes images look wrong more often that not:
Quick solution
A quick fix could be to expose an option in the template to setup how images should be fit, to allow for example the contain setting:
It is not ideal, but at least images look correct.
Better solution
Ideally, maybe the gallery component could be replaced by a smarter one? One that would create a grid based on the ratios of the images it is given. This is how it works for example in hugo-theme-gallery, which in my experience makes images look good in a very wide range of ratios and formats you throw at it.
As it stands, the default
background-size
property from the gallery component in theachievements
section, which is set tocover
, is the only fit option for images. Which makes images look wrong more often that not:Quick solution
A quick fix could be to expose an option in the template to setup how images should be fit, to allow for example the
contain
setting:It is not ideal, but at least images look correct.
Better solution
Ideally, maybe the gallery component could be replaced by a smarter one? One that would create a grid based on the ratios of the images it is given. This is how it works for example in hugo-theme-gallery, which in my experience makes images look good in a very wide range of ratios and formats you throw at it.
Thanks for the project! Best regards