Just a small example that left me speechless, I wanted a simple thing, keep an <image> element with the height always equal to the width (basically a square) but didn't want to use "px" so it would scale correctly (% or view port dimensions).
I just asked to chatGPT "how can I keep an image height always equal to its width in css ?" and the answer was:
"To keep an image's height always equal to its width in CSS, you can use the padding-bottom property to set the height of the image as a percentage of its width."
And it worked flawlessly because "The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block. Must be nonnegative."
I should have known this but I didn't and when I tried this in Google I had to check several pages with not as good solutions like "just make the px count the same, i.e: 400px vs 400px" until I reached w3school ratio explanation with padding-bottom.
I just wanted to share this small example that really helped me and might be useful for others.
PS: For anyone reading this, have a nice Christmas and if you don't celebrate Christmas I hope you enjoy your festivities.
