AI is something I should know more about, I need to take some serious time to learn it and do a small side project to really understand it, but meanwhile I've started using chatGPT and I just keep getting amazed by how much better the results are compared to google (programming wise).

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.