[英]can not make svg image half page
i have this svg image code (since its too long i wont type in script) the problem is i can't make this svg as half cover page, any help?我有这个 svg 图像代码(因为它太长了我不会输入脚本)问题是我不能把这个 svg 作为半封面,有什么帮助吗?
<div class="container" style="width: 200%;"> <div class="row"> <svg width="794" height="571" viewBox="0 0 794 571" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="794" height="571" fill="#F6EAFF"/> </svg> </div> </div>
You can nested your svg, with a div and put a class on it.您可以使用 div 嵌套 svg 并在其上放置一个类。 With this class you can adjust height and width
通过这个类,您可以调整高度和宽度
Very simple example :非常简单的例子:
.container-svg{ height: 100px; width: 100px; }
<div class="container" style="width: 200%;"> <div class="row"> <div class="container-svg" > <svg width="100%" height="571" viewBox="0 0 794 571" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="794" height="571" fill="#F6EAFF"/> </svg> </div </div> </div>
This will make the SVG's container 50% of the height of your screen:这将使 SVG 的容器占屏幕高度的 50%:
<div class="container" style="width: 100%">
<div class="row">
<svg
width="auto"
height="50vh"
viewBox="0 0 794 571"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="794" height="571" fill="#F6EAFF" />
</svg>
</div>
EDIT:编辑:
<!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>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<svg width="100%" height="100vh">
<rect width="100%" height="50vh" style="fill: rgb(226, 127, 33)" />
</svg>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.