Hi eyeryone, I have these transparent png white outline square icons. I’m setting different background colors to the image and they all have a padding of 15% to each side so they are evenly centered. When opening the website in Safari it looks like this though. How can I keep them perfectly square?
Your images are not perfectly square from what I’m seeing. Each icon has a different aspect ratio.
I would size them in your software (Illustrator?) to all have the same pixel dimensions, even if the icon is somewhat floating within the artboard. This way, the style you apply will treat all images equally.
I would remove the padding you’ve added to the image itself. Instead, add the 15px of padding and the background color to the parent element “.image-wrapper”.
In this situation, since the images don’t scale with the browser, I’d probably give the icons a fixed pixel width/height and adjust the sizing for each viewport.