Place square svg to the center of the screen, scale it to fit the screen's width and height with some constraints

后端未结

关注

 6  1422

It seem to be a silly question and possibly a dupe, but I couldn\'t find a good solution for a while, so finally dare to ask.

I want to place an

相关标签:

6条回答

一整个雨季

2021-02-14 14:41

Have you tried adding the image as a background to your svg-container?

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
  background-image:url('yourSVG.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

0 讨论(0)

慢半拍i

2021-02-14 14:48
The following works if the aspect ratio of the SVG is a given. If the aspect ratio of the SVG is dynamic, you have to use JavaScript, I believe.

This snippet works in modern browsers and takes full advantage of the relatively new vmin viewport-percentage length. Browser support is pretty good. For horizontal and vertical centering, the flexbox layout mode is leveraged. Again, browser support is pretty good.

The trick is that the dimensions of the SVG are set relative to either the width or the height of the screen, whichever is smallest. This means that even when we would set it to be 100vmin, the SVG is guaranteed to fit the screen (but barely). To enforce maximal dimensions, good old max-width and max-height are used, exactly as they are intended to be used.
```
html, body {
  /* ensure that all of the viewport is used */
  width: 100%;
  height: 100%;
  /* ensure that no scrollbars appear */
  margin: 0;
  padding: 0;
  
  /* center SVG horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

#picture {
  /* ensure 1:1 aspect ratio, tweak 50 to make SVG larger */
  width: 50vmin;
  height: 50vmin;  
  /* set some maximum size (width and height need to match
   * aspect ratio, 1:1 in this case */
  max-width: 200px;
  max-height: 200px;
}
```
```
<svg id="picture" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"></circle>
</svg>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2021-02-14 14:49
The flexbox solution would be my first choice. Since someone else has already answered with that idea I came up with this different approach.

Basically it is the absolute centering technique and rely on absolute position and auto margin to center the element.
```
body {
  height: 100vh;
  margin: 0;
}

svg#picture {
  max-height: 15cm;
  max-width: 15cm;
  height:100%;
  width:100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
```
```
<svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
  <circle cx=50 cy=50 r=50></circle>
</svg>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

盖世英雄少女心

2021-02-14 14:59

You still want aligment vertical? look this

.vertical-align {
	height:1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-container {
  	max-height:15cm;
  	max-width:15cm;
	height: 100%;
	width: 100%;
}

<div class="vertical-align">
	<div class="svg-container">  
	<svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
	  <circle cx=50 cy=50 r=50></circle>
	</svg>
	</div>
</div>

0 讨论(0)

逝去的感伤

2021-02-14 15:05
Try this css:
```
#picture {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 80%;
  height: 80%;
}
```
here is the result: https://jsfiddle.net/twe9jfkf/

is this what you try to achieve?
0 讨论(0)
发布评论:

提交评论
- 加载中...

灰色年华

2021-02-14 15:05

Rather than css, you may want to try using svg's width/height, and viewBox computed via getBBox() A basic example is shown below:

<!DOCTYPE HTML>

<html>

<body>
<svg>
  <circle cx=50 cy=50 r=50 fill=red />
</svg>

<script>
//--onload, onresize----
function sizeSVG()
{
	var mySVG=document.getElementsByTagName("svg")[0]

  	var svgW=window.innerWidth
	var svgH=window.innerHeight

    var bb=mySVG.getBBox()
	var bbx=bb.x
	var bby=bb.y
	var bbw=bb.width
	var bbh=bb.height

    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}

document.addEventListener("onload",sizeSVG(),false)
window.onresize=sizeSVG
</script>

</body>

</html>

0 讨论(0)