images not equal
original https://help.goabstract.com/hc/en-us
clone https://abstractclone.netlify.app
hi i took a challenge from frontend practice level 1 it went smoothly i even made an adjustment to the original site logo i learnt 2 things in this project :
1 - mastered responsive layout with rem and em units + mobile first approach which is new to me since i did only pc first .
2 - learnt how to clone and design svg icons with inkscape
but i still weak in font sizes and organized code (apologies upfront specially the hamburger + search menu i got lazy to continue make it ) and i encountered a problem theres a grid that has 6 pics which i donloaded from the original website but they were different sizes and they were nested in
<img> tags duhh! so first i did the usual they werent the desired result so i loaded them into squoosh site and made them the same size 288px again not what i wanted so i did a background-image yes as you heard the results were somewhat as needed but still theres another way ?
2 Replies
You could have left the images in <img> tags and just given them all the same size. The problem with images, especially ones like these, as if they have different padding (within the image) - that makes it much harder to get them to appear the same size.
Actually haven't read the question properly so this may not be of any help – but I'll just leave it here:
I've seen this article lately. It doesn't serve an instant solution, but the approach: https://pepper.digital/articles/proportional-logo-re-sizing