CODEWITHSUNDEEP
htmlcsssvgfrontend
JasonFitz
JasonFitz

Reputation: 193

How to make <svg> always fit an image

(Edited) I am trying to make a webpage that displays an image that should either fill 50% of the width, or 80% of the height of the page, depending on the aspect ratio. I want to always display the full image without any distortions, and I need the surrounding svg to be the same size as the image inside. The webpage will allow users to draw on the image and save their changes. This must be dynamic, so that any image will work.

This is the code that I have right now. I expected it to scale the image to 50% of the page width without changing the aspect ratio, and expand the svg to fit around the image. However, the height of the svg does not match the height of the image.

html:

<svg id="svg">
    <image href="data:image/png;base64,{{ my_image }}"/>
</svg>

css:

#svg {
    width: 50%;
    height: fit-content;
}

#svg image {
    width: 100%;
    height: auto;
}

After I get the height of the div to match the height of the image, how can I set a max-height without cutting off part of the image?

Upvotes: 2

Views: 563

Answers (1)

thenocturnalguy
thenocturnalguy

Reputation: 302

I don't think you can adjust the parent element according to the size of the child image element but you can set

overflow:auto;
display: table;

of the parent element to display the child image element properly.

CSS:

#svg {
    width: 50%;
    display: table;
    overflow: auto;
}

Upvotes: 1

Related Questions