How to fit SVG on screen when changing orientation?

M

meridbt2020-10-12 13:39:45

css

meridbt, 2020-10-12 13:39:45

Good afternoon, dear colleagues!

I draw a page that has a static header and footer, and all the space between them should be occupied by a block with SVG inside

<!-- index.php -->
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
...
<body>
<div class="header">
  ...
</div>
<div class="main">
  <div class="content">
    <svg id="main_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 132 132">
      <use xlink:href="/assets/image/main.svg#common" />
    </svg>
  </div>
</div>
</div>
<div class="footer">
    ...
</div>
</body>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html{
  color: #fff;
    background-color: #000015;
  width: 100%;
  height: 100%;
    display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  flex: 0 0 auto;
}

.main {
  flex: 1 0 auto;
}

.footer {
  flex: 0 0 auto;
  width: 100%;
  background: #00000a;
}

@media screen and (orientation : portrait){
  .content {
    width: 100%;
  }
}

@media screen and (orientation : landscape){
  .content {
    height: 100%;
  }
}

When viewed in portrait orientation, the SVG with a square-shaped viewport fits on the screen, but if you change the orientation to landscape, the content block takes up the entire width of the screen and the screen becomes scrollable. If you remove SVG, then in landscape orientation the content block fits on the screen.

How can I make an SVG block shrink to fit on a wide screen?

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

D

DrWeyber, 2020-10-12
@DrWeyber

Try jsom to change the Viewbox in its attributes, I'm not sure what will work, but you can try experimenting with this viewbox

S

Stepan Voevodin, 2020-10-13
@melpnz

Try replacing the viewbox with wight and height and set it to 100%

A

Antony Bark, 2020-10-22
@tolfy

How to make rubber svg? , and specifically the example https://codepen.io/tolfy/pen/LNpEgP
try to change the orientation, the property workspreserveAspectRatio="none"

M

meridbt, 2020-10-14
@meridbt

Colleagues, thanks for your time, the solution was found >>>HERE<<<
How it works to look at >>>CODEPEN<<<