我希望藍線始終連接左上角和右下角，而不會顯示溢位和滾動條。目前它只發生在寬度小于高度（或多或少）時，否則它會增加高度，從而導致螢屏溢位和顯示滾動條。似乎沒有任何preserveAspectRatio選擇可以開箱即用。理想情況下，我正在尋找僅標記的解決方案。
<!DOCTYPE html>
<html style="height: 100%;">
<body style="height: 100%; margin: 0;">
<div
style="width: 100%; height: 100%; display: grid; grid-template-rows: min-content auto; grid-template-columns: auto;">
<div style="grid-row: 1; grid-column: 1; border-bottom: 1px solid #ccc;">
<p style="margin: 5px;">Header</p>
</div>
<div style="grid-row: 2; grid-column: 1; display: grid;">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" />
</svg>
</div>
</div>
</body>
</html>
編輯：遵循 Dave 精彩解釋的作業示例：
<!DOCTYPE html>
<html style="height: 100%;">
<body style="height: 100%; margin: 0;">
<div
style="width: 100%; height: 100%; display: grid; grid-template-rows: min-content minmax(0, 1fr); grid-template-columns: auto;">
<div style="grid-row: 1; grid-column: 1; border-bottom: 1px solid #ccc;">
<p style="margin: 5px;">Header</p>
</div>
<div style="grid-row: 2; grid-column: 1; display: grid;">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" vector-effect="non-scaling-stroke" />
</svg>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
如果我理解正確，您希望 svg 更改縱橫比，以便對角線始終完全可見。
您的 svg 結構正確，可以preserveAspectRatio="none"在使用用戶單位繪制的影像上執行此操作，以進行線條和視圖框匹配。
您的 svg 超出頁面高度的原因是容器 div 超出了頁面高度。
我已經向包含 svg 的父 div 添加了一個類，并將其設定為高度為100vh（減去標稱像素值以確保不顯示滾動條）。我還給了 div 一個邊框，這樣你就可以看到它現在占據了可視螢屏，并且 SVG 將這條線從左上角重新顯示到右下角。
在可調整大小的頁面上，div 將調整大小，svg 將更改縱橫比以始終占據它。
.svgFrame {
border: 1px solid red;
width: 100%;
height: calc(100vh - 20px);
} <div class="svgFrame" style="grid-row: 2; grid-column: 1; display: grid;">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" />
</svg>
</div>關鍵是要約束父 div 使其完全保持在頁面上的視圖中；沒有約束preserveAspectRatio="none"就沒有效果，因為沒有理由改變縱橫比。
在這個基于網格布局的示例中，使用包含父 div 的網格的樣式minmax(0, 1fr)具有預期的效果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475345.html