Why does OBJECT element always 100% of html width despite SVG scaling proportions

Question

Can someone please explain why, when my SVG image shrinks in height and its width shrinks proportionally to achieve true scaling, that the width of the OBJECT tag/element still demands 100%

See here for an SSCCE.

See GitHub pages (case-sensitive URLs) for a working example. SVG is too big to include here.

Here's the HTML

<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
    window.addEventListener("load", () =>
        {
            var imageDOM = document.getElementById("crest").contentDocument;
            var svgRoot = imageDOM.querySelector(':root');
            svgRoot.style.setProperty('--coa-bg-color', '#ffd700');
            
            var crest = imageDOM.getElementById("wa_state_crest");
        });
</script>
<style type="text/css">
:root {
  --main-bg-color: #002f5f;
  --coa-body-color: #ffd700;
}
    @-ms-viewport{
        width: device-width;
        height: auto;
    }   
    *, *:before, *:after{
        box-sizing: inherit;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -moz-user-select: none;
    }       
    ::-ms-clear{
        display: none;
    }       
    html, body{
        margin: 0px;
        box-sizing: border-box;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-overflow-style: none;
        -ms-content-zooming: none;
        touch-action: manipulation;
    }
    body {
        background-image: radial-gradient(#fff, #1ecbe1, #ADD8E6);
        overscroll-behavior: none;
        pointer-events: auto;
        display: flex;
        font-size: 14px;
        flex-direction: column;
        height: 100vh;
        padding: 1em;
    }   
    
    .wholeScreen{
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0px;
    }   

    div#headerDiv{
        display: flex;
        order: 1;
        width: 100%;
        padding: 0.5em;
        align-items: center;
        flex-grow: 10;
        flex-shrink: 10;
        flex-basis: 10%;
        color: var(--coa-body-color);
        text-shadow: 0 -.3em .3em #fff;
    }

.field__items {
        display: flex;
        order: 2;
        align-items: center;
        flex-grow: 90;
        flex-shrink: 90;
        flex-basis: 90%;
        min-height: 0;
}
.field__item {
    display: flex;
    order: 3;
    justify-content: center;
    align-content: center;
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    max-height: 100%;
    padding: 1em;
}

#crest {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: 3;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@media only screen 
and (min-device-width : 320px) {
    body {
        font-size: 24px;
    }
}       
@media only screen 
and (min-device-width : 1025px) {
    body {
        font-size: 32px;
    }
}   
@media only screen 
and (min-device-width : 3840px) (
    body {
        font-size: 48px;
    }
}       
</style>
</head>
<body>
<div class="wholeScreen">
   <div id="headerDiv">
     <h1>Coat of Arms</h1>
   </div>
   <div class="field__items">
        <div class="field__item">
          <object id="crest" title="Government of Western Australia" alt="Western Australian Coat of Arms" data="coa.svg" type="image/svg+xml"></object>
        </div>
    </div>
</div>
</body>
</html>

Please add the relevant HTML,css and SVG to the question and not a link to off-site resources — Professor Abronsius
– Professor Abronsius, Commented Oct 17, 2023 at 7:14
A StackOverflow SSCCE is: minimal-reproducible-example StackOverflow Snippet — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Oct 17, 2023 at 7:41
An object element does not size itself to the dimensions of its content (same as an iframe wouldn't), if(?) that's what you are asking. Why are you using an object to embed an SVG image in the first place? — C3roe
– C3roe, Commented Oct 17, 2023 at 11:27
Following @CBroe, If the SVG only has static content, so no animations and no interactive parts you can just use a img element. Then I think it behaves more like you would expect. — chrwahl
– chrwahl, Commented Oct 17, 2023 at 15:25
Need an OBJECT tag for the external CSS Stylesheet (I need and externa;lCSS stylesheet) to expose SVG styling to Javascript) The object tag is taking up 100% width of it's parent container. Is there anyway to say "Ok, you scaled your SVG height AND width down, how about reducing the width of the OBJECT so that it can float/align left in its parent DIV"? — McMurphy
– McMurphy, Commented Oct 17, 2023 at 23:58

McMurphy · Accepted Answer · 2023-10-19 00:03:53Z

0

This seems to work: -

.field_item {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-basis: 20%;
    flex-grow: 1;
    flex-shrink: 1;
    max-height: 100%;
}

<body>
    <div class="wholeScreen">
        <div id="headerDiv">
            <div class="field_item" style="width:100%; height:100%; justify-content: left;">
                <object id="header-crest" title="Government of Western Australia" alt="Western Australian Coat of Arms" data="coa.svg" type="image/svg+xml"></object>
            </div>
            <div>
                <h1>Heading</h1>
            </div>
            <div>
                <span>menu</span>
            </div>
        </div>

answered Oct 19, 2023 at 0:03

McMurphy

1,4831 gold badge20 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does OBJECT element always 100% of html width despite SVG scaling proportions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related