I have a canvas inside div:
<div class="preview"><canvas id="cropped" width="2480" height="2003"></canvas></div>
Div block is less then canvas side. How to autofit canvas by two cases:
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';
}
}
};
You can simply use the '%' symbol to denote proportional height of the parent. For example (in your CSS):
#cropped {
width: 100%;
height: 80%;
}
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>