Search code examples
htmlsvgflexboxresponsive-imageshtml-object

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

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>
Solution

  • 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>