CODEWITHSUNDEEP
htmlcssreactjssvg
Ivaldir
Ivaldir

Reputation: 195

Resize SVG component to fit parent

I'm having some trouble scaling an svg component to fit it's parent container. The code below results in the svg being stretched to 100% of the window height and 50% of the window with instead of basing it off the container which it's in. Where am I going wrong?

Style:

.mapFrame {
    width: 100%;
    height: 100%;
    object-fit: fill;
    background-color:blue;
}

.mapFrame img {
    width: 100%;
    height: 100%;
}

.mapFrame svg {
    left: 0;
    right: 0;
    position: absolute;
    background-color:green;
    width: 50%;
    height: 100%;
}

React component:

import { useState } from 'react';
import "./Map.css"

const Map = (props) => {
    const [map, setmap] = useState(props.mapUrl);

    return (
        <div className="mapFrame">
            <img src={map} />
            <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                <path d="M0 0 L100 0 L50 100 Z" />
            </svg>
        </div>
    )
}

export default Map

Result

Upvotes: 2

Views: 1336

Answers (1)

Pandaiolo
Pandaiolo

Reputation: 11568

What if you set the container to relative?

Otherwise, it will not act as referring container for any child dimensions.

.mapFrame {
    position: relative; /* this */
    width: 100%;
    height: 100%;
    object-fit: fill;
    background-color:blue;
}

Upvotes: 1

Related Questions