I have a canvas inside div:

<div ><canvas id="cropped" width="2480" height="2003"></canvas></div>

Div block is less then canvas side. How to autofit canvas by two cases:

1. canvas width autofit proportional of parent width div
2. canvas height autofit proportional of parent height div

I tried this way:

public autofit = (orientation: RegistryOrientation) => {
    let previews = document.getElementsByClassName('preview');

    if (previews.length > 0) {
        let preview = previews[0];
        let width = preview.clientWidth;
        let height = preview.clientHeight;

        if (orientation === RegistryOrientation.album) {
            this.imgCanvas.style.width = width   'px';
            this.imgCanvas.style.height = 'auto';
        } else if (orientation === RegistryOrientation.book) {
            this.imgCanvas.style.height = height   'px';
            this.imgCanvas.style.width = 'auto';
        }
    }
};

CodePudding user response：

You can simply use the '%' symbol to denote proportional height of the parent. For example (in your CSS):

#cropped {
  width: 100%;
  height: 80%;
}

CodePudding user response：

Pretty sure this is what you want:

div {
  border: 1px solid red;
  width: 200px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

canvas {
  border: 1px solid blue;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div><canvas width="1000" height="1000"></canvas></div>