Make the SVG fill its container

Im trying to display my SVG on my page, the result (right screen)


You see how the image stops short of the containing div.
I’m guessing its keeping the aspect ratio set on the svg element (middle screen)
How can I keep the functionality but give it a width of 100%?

You should be able to override the SVG’s intrinsic size with CSS, just as you would with an image.

On my index.html page, i put

<style>
svg {
width:100%;
}
</style> 

Is that what you meant, causes that didn’t work

Does this work?

<style>
svg {width: 100%;
    height: auto;
    object-fit: cover;
</style>

no, heres the result, the source code is the middle

Make height: 100% and see if that works.


it,looks like the width & height are being overridden by the attributes
(*I inspected the element)

I’ve not used SVG in an object before, but it seems to behave similar to an iframe, where the contained resource is treated as an external document, untouched by the host document’s CSS.

ok, bypassed the object tag and just used the svg tag and now the background seems to stretch, but why not the image also?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.