当浏览器 window 垂直调整大小时，如何使 div 内的 svg 自动垂直调整大小
[英]How to make an svg inside a div to automatically rescale vertically when the browser window is resized vertically
问题描述
Given the following simple html page body
给定以下简单的 html 页面正文
...
<body>
<div>
...
</div>
<div>
...
</div>
<div style="height:***">
<svg width="100%" height="100%">
...
</svg>
</div>
</body>
let's focus on the last div, which contains an svg element.让我们关注最后一个 div，它包含一个 svg 元素。
If the browser window is resized horizontally, the div width changes automatically with the new size.如果浏览器 window 水平调整大小，则 div 宽度会随着新大小自动更改。 As a consequence, the svg width follows and the contained drawing scales accordingly.因此，svg 宽度随之而来，并且包含的绘图相应地缩放。 This without any special stilying or javascript responsive code.这没有任何特殊的 stilying 或 javascript 响应代码。
If the browser window is resized vertically, on the other hand, neither the div nor the svg height change.另一方面，如果浏览器 window 垂直调整大小，则 div 和 svg 高度都不会改变。
1 - What.css needs to be applied to the div to obtain the same effect vertically? 1 - What.css 需要应用到div上才能垂直获得同样的效果？
In other words, the div should resize to an height which exactly (no y overflow) fills the current remaining visible space in the browser window.换句话说，div 应该调整到一个高度，恰好（没有 y 溢出）填充浏览器 window 中当前剩余的可见空间。
As a consequence, the svg would rescale vertically accordingly, which is the desired final effect.因此，svg 将相应地垂直重新缩放，这是所需的最终效果。
If css is not enough to obtain this effect and javascript is absolutely necessary,如果 css 不足以获得这个效果而 javascript 是绝对必要的，
2 - Which event should be hooked, on which element, and what code is needed 2 - 应该挂钩哪个事件、哪个元素以及需要什么代码
to calculate the exact height to assign the the div to have no y overflows (considering previous elements, borders, paddings, margins etc.)?计算确切的高度以分配 div 没有 y 溢出（考虑先前的元素、边框、填充、边距等）？
1 个解决方案
解决方案1
0 2022-08-27 09:50:43
You need to use vh for vertical rescale and vw for horizontal rescale.您需要使用vh进行垂直缩放，使用vw进行水平缩放。
<body>
<div>
...
</div>
<div>
...
</div>
<div style="height:10vh; width:10vw;" >
<svg width="100%" height="100%">
...
</svg>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.