How to align the scale and position of pictures in blocks for a site in Photoshop?

Question

css

The WP site has a block in which a text block is inserted, about 30 small PNG, JPG pictures (car brands) are inserted into it. Naturally, there are source codes for pictures.
When inserting them into the site and grouping them in a line - they are all crooked vertically, some are too enlarged relative to others.



How do I understand the problem in the image files themselves, and not in CSS?
Do you mean they need to be leveled before pouring?
First lead to one resolution and then scale the content?

Question : How to quickly and correctly bring them all to the same scale and location on the horizon?
I speak Photoshop at an average level, I can do it myself with crutches, but I want to know how experts do it right?

An example of "curved" sources.


An example of a file displaying correctly

Answer 1

Hello!
1) process your icons in Photoshop and bring them to the same size. For example, create a 50x50 px canvas. Then put each icon in the center.
2) add images to html + style them with css. For example, using flexbox or something.