CODEWITHSUNDEEP
javascripthtmlcsssvg
simulate
simulate

Reputation: 1282

CSS resizable div with fixed aspect ratio

I want to draw a <svg> with a fixed aspect ratio inside a resizable <div> that fits to the size of the contained SVG — I want a resizable SVG with a fixed aspect ratio. I can't set the svg itself resize: both, for some reason, I need to wrap it in a div.

I am using the Rust Seed library, so my code is not JavaScript, but you should still get the idea:

div![ // wrapping div
    style!{
        St::MaxWidth => "100%";
        St::MaxHeight => "100%";
        St::Resize => "both";
        St::Overflow => "auto";
    },
    svg![ // contained svg
        style!{
            St::BackgroundColor => "gray";
        },
        attrs!{
            At::Width => "100%",
            At::Height => "100%",
            At::ViewBox => format!("0 0 {} {}", width, height),
            At::PreserveAspectRatio => "xMinYMin meet",
        },
        text![ // svg text
            "Example SVG"
        ],
    ]
]

I can not get the wrapper to match the svg size, I have tried using "min-content", "max-content" on the MaxWidth and MaxHeight attributes, but it doesn't have the desired effect. How can I get this to work?

This is the current behavior: enter image description here

Upvotes: 1

Views: 180

Answers (1)

simulate
simulate

Reputation: 1282

One "solution" is to use resize: horizontal and height: auto on the container. Also this requires the height attribute on the svg to be omitted (width is also not needed).

div![
    style!{
        St::Resize => "horizontal",
        St::Overflow => "auto",
        St::Height => "auto",
    },
    svg![
        attrs!{
            At::ViewBox => format!("0 0 {} {}", width, height),
            At::PreserveAspectRatio => "xMinYMin meet",
        },
        text![
            "Example SVG"
        ],
    ]
]

Unfortunately this changes the cursor to be e-resize, which is not exactly beneficial for user-experience. There are other hacks to change the cursor back, but none which I have tried worked so far.

enter image description here

Upvotes: 2

Related Questions