SVG Icon Size Not Scaling Correctly in CSS Grid Layout with Tailwind CSS
I'm trying to configure I'm performance testing and I tried several approaches but none seem to work. I'm having trouble with SVG icons in a CSS Grid layout while using Tailwind CSS. Specifically, I want my SVG icons to scale appropriately within their grid cells, but they are not maintaining their aspect ratio as expected. For example, I have a grid setup like this: ```html <div class="grid grid-cols-3 gap-4"> <div class="flex items-center justify-center"> <svg class="w-16 h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> </svg> </div> <div class="flex items-center justify-center"> <svg class="w-16 h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /> </svg> </div> </div> ``` With the above code, the SVG icons appear to stretch in some browsers, distorting their shape. I've tried using the `object-fit` property and setting the viewBox in the SVG, but nothing seems to work consistently across browsers. In Chrome, the icons look fine, but in Firefox, they appear squished. I also ensured that my Tailwind configuration is up to date (version 3.0.0), and I've checked for conflicting styles in my global CSS. I've attempted to use `aspect-ratio` as follows: ```css svg { aspect-ratio: 1 / 1; } ``` However, that hasn't resolved the issue either. Is there a specific way I can ensure that my SVG icons maintain their aspect ratio across all browsers while fitting within the grid layout? Any insights would be greatly appreciated! Has anyone dealt with something similar? The project is a mobile app built with Html/Css.