如果我有一个SVG元素(或任何其他元素(，并且它的宽度为200px，我可以自动缩放它以适应另一个元素的大小吗？也就是说，我可以把它缩放到70倍的宽度，保持纵横比吗？
.container {
background-color: red;
/*What to put here*/
width: 300px;
height: 200px
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<div class="container">
<div style="position: relative;/* object-fit: scale-down; *//* max-width: 10px; *//* width: 100px; */"><svg
xmlns="http://www.w3.org/2000/svg" width="720" height="480" role="img" style="
object-fit: scale-down;
">
<rect width="720" height="480" fill="transparent"></rect>
<g transform="translate(70,10)">
<g>
<line opacity="1" x1="0" x2="0" y1="0" y2="440" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="155" x2="155" y1="0" y2="440" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="310" x2="310" y1="0" y2="440" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="465" x2="465" y1="0" y2="440" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="620" x2="620" y1="0" y2="440" stroke="#EDF2F7" stroke-width="1"></line>
</g>
<g>
<line opacity="1" x1="0" x2="620" y1="440" y2="440" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="410" y2="410" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="381" y2="381" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="351" y2="351" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="322" y2="322" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="292" y2="292" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="263" y2="263" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="233" y2="233" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="204" y2="204" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="174" y2="174" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="145" y2="145" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="115" y2="115" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="86" y2="86" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="56" y2="56" stroke="#EDF2F7" stroke-width="1"></line>
<line opacity="1" x1="0" x2="620" y1="27" y2="27" stroke="#EDF2F7" stroke-width="1"></line>
</g>
<g transform="translate(0,440)">
<g transform="translate(0,0)" style="opacity: 1;">
<line x1="0" x2="0" y1="0" y2="5" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(0,10) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">01/03/22</text>
</g>
<g transform="translate(155,0)" style="opacity: 1;">
<line x1="0" x2="0" y1="0" y2="5" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(0,10) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">01/03/22</text>
</g>
<g transform="translate(310,0)" style="opacity: 1;">
<line x1="0" x2="0" y1="0" y2="5" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(0,10) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">01/03/22</text>
</g>
<g transform="translate(465,0)" style="opacity: 1;">
<line x1="0" x2="0" y1="0" y2="5" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(0,10) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">01/03/22</text>
</g>
<g transform="translate(620,0)" style="opacity: 1;">
<line x1="0" x2="0" y1="0" y2="5" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(0,10) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">01/03/22</text>
</g>
<line x1="0" x2="620" y1="0" y2="0" style="stroke: transparent; stroke-width: 1;"></line>
</g>
<g transform="translate(0,0)">
<g transform="translate(0,440)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">0
ms</text>
</g>
<g transform="translate(0,410)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">20
ms</text>
</g>
<g transform="translate(0,381)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">40
ms</text>
</g>
<g transform="translate(0,351)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">60
ms</text>
</g>
<g transform="translate(0,322)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">80
ms</text>
</g>
<g transform="translate(0,292)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">100
ms</text>
</g>
<g transform="translate(0,263)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">120
ms</text>
</g>
<g transform="translate(0,233)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">140
ms</text>
</g>
<g transform="translate(0,204)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">160
ms</text>
</g>
<g transform="translate(0,174)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">180
ms</text>
</g>
<g transform="translate(0,145)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">200
ms</text>
</g>
<g transform="translate(0,115)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">220
ms</text>
</g>
<g transform="translate(0,86)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">240
ms</text>
</g>
<g transform="translate(0,56)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">260
ms</text>
</g>
<g transform="translate(0,27)" style="opacity: 1;">
<line x1="0" x2="-5" y1="0" y2="0" style="stroke: rgb(237, 242, 247); stroke-width: 1;"></line><text
dominant-baseline="central" text-anchor="end" transform="translate(-21,0) rotate(0)"
style="fill: rgb(113, 128, 150); font-weight: bold; font-family: Inter, sans-serif; font-size: 11px;">280
ms</text>
</g>
<line x1="0" x2="0" y1="0" y2="440" style="stroke: transparent; stroke-width: 1;"></line>
</g>
<path d="M0,201L155,174L310,126L465,202L620,217" fill="none" stroke-width="4" stroke="#D6BCFA"></path>
<g>
<g transform="translate(620, 217)" style="pointer-events: none;">
<g>
<circle fill="#fff" r="8" stroke-width="1" stroke="rgb(192, 169, 225)"></circle>
<circle r="3.2" stroke-width="1" stroke="rgb(192, 169, 225)" fill="#D6BCFA" fill-opacity="0.35">
</circle>
</g>
</g>
<g transform="translate(465, 202)" style="pointer-events: none;">
<g>
<circle fill="#fff" r="8" stroke-width="1" stroke="rgb(192, 169, 225)"></circle>
<circle r="3.2" stroke-width="1" stroke="rgb(192, 169, 225)" fill="#D6BCFA" fill-opacity="0.35">
</circle>
</g>
</g>
<g transform="translate(310, 126)" style="pointer-events: none;">
<g>
<circle fill="#fff" r="8" stroke-width="1" stroke="rgb(192, 169, 225)"></circle>
<circle r="3.2" stroke-width="1" stroke="rgb(192, 169, 225)" fill="#D6BCFA" fill-opacity="0.35">
</circle>
</g>
</g>
<g transform="translate(155, 174)" style="pointer-events: none;">
<g>
<circle fill="#fff" r="8" stroke-width="1" stroke="rgb(192, 169, 225)"></circle>
<circle r="3.2" stroke-width="1" stroke="rgb(192, 169, 225)" fill="#D6BCFA" fill-opacity="0.35">
</circle>
</g>
</g>
<g transform="translate(0, 201)" style="pointer-events: none;">
<g>
<circle fill="#fff" r="8" stroke-width="1" stroke="rgb(192, 169, 225)"></circle>
<circle r="3.2" stroke-width="1" stroke="rgb(192, 169, 225)" fill="#D6BCFA" fill-opacity="0.35">
</circle>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</body>
</html>是的，您可以调整它的大小以适应另一个元素，并保持纵横比。请参阅CSS属性object-fit：https://developer.mozilla.org/es/docs/Web/CSS/object-fit