У меня есть холст - единственное, что я действительно хочу видеть на странице. Я пытаюсь сделать так, чтобы при изменении размера окна у меня всегда был виден весь холст без полос прокрутки и сохранялось соотношение сторон.

MCVE

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width;
let h = canvas.height;

ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();
* {
  background-color: white;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

div#canvasDiv {}

canvas#canvas {
  display: block;
  margin: auto;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>

  <body>
    <div id="canvasDiv">
      <canvas id="canvas" width="500" height="500" />
    </div>
  </body>

</html>

Все здесь, в jsfiddle

С этой попыткой он отлично масштабируется, когда я меняю ширину. Однако, когда я изменяю размер высоты, я получаю переполнение.

Изменить ширину с соответствующим масштабированием

enter image description here

Изменение размера высоты с нежелательным переполнением

enter image description here

1
piRSquared 4 Окт 2018 в 19:23

1 ответ

Лучший ответ

Вы можете прочитать эту статью: [Центрирование в CSS: полное руководство] (https : //css-tricks.com/centering-css-complete-guide/

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width;
let h = canvas.height;

ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();
* {
  background-color: white;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}


canvas#canvas {
  display: block;
  margin: auto;
  position:absolute;
  top:0;bottom:0;
  left:0;
  right:0;
  
}
   <div id="canvasDiv">
      <canvas id="canvas" width="500" height="500"/>
    </div>
2
enxaneta 4 Окт 2018 в 17:01