Kevin Powell - Community•2mo ago

issues with svg being resized based on their parent flexbox

i have an issue here, big svgs in width that i fetch from a source i have a list of svgs, that are 100vw long, they're 6 of them & i want to use them in a flex container & to resize based on the container if i substracted or added a new element here's the blade file

                <div class="trademarks-belt mt-24 flex max-w-full h-auto">
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-45.svg') }}" class="" alt="Google-ads-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-46.svg') }}" class="" alt="Tiktok-Business-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-47.svg') }}" class="" alt="Meta-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-48.svg') }}" class="" alt="Miro-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-49.svg') }}" class="" alt="Notion-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-50.svg') }}" class="" alt="Slack-logo" />
                </div>

                <div class="trademarks-belt mt-24 flex max-w-full h-auto">
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-45.svg') }}" class="" alt="Google-ads-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-46.svg') }}" class="" alt="Tiktok-Business-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-47.svg') }}" class="" alt="Meta-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-48.svg') }}" class="" alt="Miro-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-49.svg') }}" class="" alt="Notion-logo" />
                    <img src="{{ Vite::asset('resources/assets/images/svg/INDUSTRY LEADER/VAR-50.svg') }}" class="" alt="Slack-logo" />
                </div>

the images won't resize based on the flex

12 Replies

Dev_HKOP•2mo ago

see the scrollbar it goes on

b1mind•2mo ago

I'd take them out of <img> and use them proper <svg> also you should really never use spaces in your folder names. Especially if they are going to be paths.

Dev_HKOP•2mo ago

uhh that means to copy paste all that content of the svg back into the html, can't do it also it doesn't have the src property as img

b1mind•2mo ago

use a SVG sprite and <use> make a dynamic component and brrrrrrrrrrr Also use grid to fill, flex to condense just a tip 😄

Dev_HKOP•2mo ago

what about that??

b1mind•2mo ago

Gird will make its children want to fill rather than be dense (max-content) by default Either works just find Grid is easier to mess with if you want things to fill less effort/code

Dev_HKOP•2mo ago

how to make this in a grid

b1mind•2mo ago

Depends how you want it to be responsive. Can share the code in a minimal so we don't have to go back in forth. You said you wanted the svg to fill so I was just making the comment.

Dev_HKOP•2mo ago

ohh no no this on another thing

b1mind•2mo ago

oh please make a new post if its a different help question please. But same applies, depends on how you want to handle the "squish" or responsiveness.

Dev_HKOP•2mo ago

!closed

dys 🐙•2mo ago

If it's a site built using Vite, you can add the ?raw suffix, like import Image from '$assets/image.svg?raw, and you can insert it into the page without having to edit it.

vitejs

Static Asset Handling

Next Generation Frontend Tooling

Gaming

Programming

issues with svg being resized based on their parent flexbox