如何将我的SVG图像放入Parent包装器div

我正在处理以下代码片段。我无法使我的SVG图像适合我的容器分区。

.img {
margin: 0; 
padding: 0; 
overflow: hidden
width: 500px;
position: relative;
}
img {
top:0;
left:0;
height:500px;
width:100%;
}

<div class="img">
<img src="https://svgur.com/i/SPb.svg" alt="An svg image">
</div>

我的代码笔：https://codepen.io/huyct1996/pen/zYKwXjM

任何帮助都将受到高度重视。谢谢

更新svg文件，使其中的文本居中，而不是翻译。

<svg width="100%" height="400" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="1" fill="#ECEEF4" />
<rect y="112" width="100%" height="1" fill="#ECEEF4" />
<rect y="336" width="100%" height="1" fill="#ECEEF4" />
<rect y="56" width="100%" height="1" fill="#ECEEF4" />
<rect y="280" width="100%" height="1" fill="#ECEEF4" />
<rect y="224" width="100%" height="1" fill="#ECEEF4" />
<rect y="168" width="100%" height="1" fill="#ECEEF4" />
<rect y="392" width="100%" height="1" fill="#ECEEF4" />
<text fill="#8B90A0" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Drop it here or add a file</text>
</svg>

它不会垂直扩展。Y属性是数字而不是百分比

只需在CSS中使用width:100%; height:100%。它将迫使SVG占用div的所有空间。

<div class="img">
<img style="width:100%; height: 100%;" src="img.svg" alt="image">
</div>

使用object-fit:contain解决您的问题：尝试以下代码：

UPDATE：SVG本身有一些问题，所以我直接将SVG放在HTML中，向您展示正确的方法：

.img-wrapper {
height: 500px;
width: 500px;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="img-wrapper">
<!-- <img
src="https://raw.githubusercontent.com/huyct1996/images/3ddca45402fbc1ce4ee0f1a58f67a34f87f2d8aa/empty.svg"
alt="An SVG Image"
/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
>
<rect width="100%" height="1" fill="#ECEEF4" />
<rect y="112" width="100%" height="1" fill="#ECEEF4" />
<rect y="336" width="100%" height="1" fill="#ECEEF4" />
<rect y="56" width="100%" height="1" fill="#ECEEF4" />
<rect y="280" width="100%" height="1" fill="#ECEEF4" />
<rect y="224" width="100%" height="1" fill="#ECEEF4" />
<rect y="168" width="100%" height="1" fill="#ECEEF4" />
<rect y="392" width="100%" height="1" fill="#ECEEF4" />
<text
fill="#8B90A0"
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
>
Drop it here or add a file
</text>
</svg>
</div>
</body>
</html>

相关内容

最新更新

热门标签：