提问人：mike-al 提问时间：11/10/2023 更新时间：11/11/2023 访问量：45
防止 SVG 夸大 DIV 的高度
Prevent SVG from inflating DIV in height
问：
在我的页面上，我想将 SVG 放入容器框架中。在宽度上一切正常。但是当超过高度时，页面开始增长并出现滚动（大红色）。
如何限制高度增长，使图片始终适合容器？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: 20px;
}
.full {
background-color: cadetblue;
height: 100vh;
display: flex;
flex-direction: column;
border: 5px solid rgb(255, 0, 225);
}
.top {
background-color: brown;
color: white;
height: 20vh;
flex: 0 0 auto;
}
.bottom {
display: flex;
flex-grow: 1;
}
.left {
background-color: rgb(70, 124, 168);
width: 400px;
border: 5px solid rgb(20, 255, 36);
flex: 0 0 auto;
}
.right {
background-color: rgb(255, 140, 0);
color: white;
/* flex: 1 1 auto; */
border: 5px solid rgb(20, 224, 255);
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="full">FULL
<div class="top">
TOP
</div>
<div class="bottom">
<div class="left">LEFT</div>
<div class="right">
<svg class="scaling-svg" width="100%" height="auto" viewBox="0 0 300 300">
<rect fill="#FF0000" height="296" id="svg_2" stroke="#000000" width="296" x="2" y="2" />
</svg>
</div>
</div>
</body>
</html>
在宽度上一切都很好，我希望在高度上也有相同的行为。
答：
0赞
chrwahl
11/11/2023
#1
如果不允许 SVG 溢出，一个选项可能是在 SVG 元素上设置 preserveAspectRatio 属性：
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: 20px;
}
.full {
background-color: cadetblue;
height: 100vh;
display: flex;
flex-direction: column;
border: 5px solid rgb(255, 0, 225);
}
.top {
background-color: brown;
color: white;
height: 20vh;
flex: 0 0 auto;
}
.bottom {
display: flex;
flex-grow: 1;
}
.left {
background-color: rgb(70, 124, 168);
width: 400px;
border: 5px solid rgb(20, 255, 36);
flex: 0 0 auto;
}
.right {
background-color: rgb(255, 140, 0);
color: white;
/* flex: 1 1 auto; */
border: 5px solid rgb(20, 224, 255);
display: flex;
align-items: center;
width: 100%;
height: 100%;
}<div class="full">FULL
<div class="top">
TOP
</div>
<div class="bottom">
<div class="left">LEFT</div>
<div class="right">
<svg class="scaling-svg" width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="none">
<rect fill="#FF0000" height="296" id="svg_2" stroke="#000000" width="296" x="2" y="2" />
<circle cx="150" cy="150" r="150" fill="gray" />
</svg>
</div>
</div>另一种选择是删除属性，并根据 SVG 的构造放置 SVG 的内容：viewBox
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: 20px;
}
.full {
background-color: cadetblue;
height: 100vh;
display: flex;
flex-direction: column;
border: 5px solid rgb(255, 0, 225);
}
.top {
background-color: brown;
color: white;
height: 20vh;
flex: 0 0 auto;
}
.bottom {
display: flex;
flex-grow: 1;
}
.left {
background-color: rgb(70, 124, 168);
width: 400px;
border: 5px solid rgb(20, 255, 36);
flex: 0 0 auto;
}
.right {
background-color: rgb(255, 140, 0);
color: white;
/* flex: 1 1 auto; */
border: 5px solid rgb(20, 224, 255);
display: flex;
align-items: center;
width: 100%;
height: 100%;
}<div class="full">FULL
<div class="top">
TOP
</div>
<div class="bottom">
<div class="left">LEFT</div>
<div class="right">
<svg class="scaling-svg" width="100%" height="100%">
<rect fill="#FF0000" height="98%" id="svg_2" stroke="#000000" width="98%" x="1%" y="1%" />
<circle cx="50%" cy="50%" r="120px" fill="gray" />
</svg>
</div>
</div>评论
0赞
mike-al
11/13/2023
那不完全是我需要的。我不想扭曲图像，而只是将其放入框架中。
评论