I want to create a page contains only one svg element that fit width and height and has maximum possible scale.
Add a comment
|
4 Answers
Related questions
How can I make an svg scale with its parent container?
How to resize an image to fit in the browser window?
didn't work, but combination of proposed methods solved the problem.
1) replace width="A" height="B" in opening <svg ...> tag to viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto".
Now it nearly works But not very accurate because browser automatically adds margin: 8 to body's style (even if there is not <body> tag in .html file). So
2) add <style> body { margin: 0 } </style>
This might help. I used this CSS to fit a background image to width and height and it scales down accordingly to the browser.
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
You can set your SVG in a DIV and add a class to it, then you simply use the above CSS to scale the DIV's content.
put your image in a div, and apply these css rules:
div{
height:100vw;
height:100vh;
}
svg{
height:100%;
width:100%
}
answered May 17, 2017 at 16:09
-
2
Here is the solution for you guys. Check the link here
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
.svg-cont {
width: 100vh;
height: 100vh;
display: flex;
justify-content: center;
margin: auto;
}
.svg-cont > svg {
width: 100%;
height: 100%;
}
