有人可以解释一下为什么当我的 SVG 图像高度缩小并且宽度按比例缩小以实现真正的缩放时，OBJECT 标签/元素的宽度仍然需要 100%
请参阅此处了解 SSCCE。
请参阅 GitHub 页面（区分大小写的 URL）以获取工作示例。 SVG 太大，无法包含在此处。
这是 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>
这似乎有效：-
.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>