我可以使用哪些CSS來縮放畫布以填充容器而不更改其高寬比？

我有一個特定尺寸的畫布（讓我們說300x150）。我可以使用哪些CSS來縮放畫布，以便在不改變縱橫比的情況下填充其容器，並在水平和垂直方向居中放置縮放後留下的任何額外空間。我可以使用哪些CSS來縮放畫布以填充容器而不更改其高寬比？

我想這

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
} 

#container { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 

canvas { 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
} 

<div id="container"> 
    <canvas></canvas> 
</div>

，對於除垂直居中一切正常。我試圖改變#container到table-cell與vertical-align: middle與display:table外部容器。這是垂直居中，但不再水平縮放。我嘗試將#container更改爲彈出框，但之後開始垂直縮放畫布。

還有其他想法嗎？

所以這種作品。

canvas { 
    max-width: 100%; 
    max-height: 100%; 
    margin: auto; 

    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

遺憾的是畫布永遠不會捉襟見肘，只能縮水

來源

2014-10-06 gman

不確定，但[本文]（http://css-tricks.com/centering-in-the-unknown/）可能與您的情況有關？ – aug 2014-10-06 02:15:12

我在那篇文章中嘗試過每種技巧。他們都沒有工作。我認爲這個問題是將canvas設置爲'width：auto;身高：自動打破所有這些技術 – gman 2014-10-06 06:06:26

這可能是關閉給你的問題的標籤的話題，但在這裏是用JavaScript的方式。

注意：如果需要，您可以將此示例的jquery轉換爲純javascript，這對jquery沒有重要用處。

var canvas = document.getElementById("canvas"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 
var $canvas = $('#canvas'); 
 
var $container = $('#container'); 
 
var $containerWidth = $('#containerWidth'); 
 
var $containerHeight = $('#containerHeight'); 
 
$containerWidth.val($container.css('width')); 
 
$containerHeight.val($container.css('height')); 
 
scale(); 
 

 
$('#containerWidth,#containerHeight').change(function() { 
 
    scale(); 
 
}); 
 

 
function scale() { 
 
    var containerW = $containerWidth.val(); 
 
    var containerH = $containerHeight.val(); 
 
    var scale = scalePreserveAspectRatio(cw, ch, containerW, containerH) 
 
    $container.css('width', containerW); 
 
    $container.css('height', containerH); 
 
    $canvas.css('width', cw * scale); 
 
    $canvas.css('height', ch * scale); 
 
    if (Math.abs(containerW - cw * scale) < 2) { 
 
    $canvas.css('top', parseInt((containerH - ch * scale)/2)); 
 
    $canvas.css('left', 0); 
 
    } else { 
 
    $canvas.css('top', 0); 
 
    $canvas.css('left', parseInt((containerW - cw * scale)/2)); 
 
    } 
 

 
} 
 

 
function scalePreserveAspectRatio(canvasW, canvasH, maxW, maxH) { 
 
    return (Math.min((maxW/canvasW), (maxH/canvasH))); 
 
}

body { 
 
    background-color: ivory; 
 
} 
 
#container { 
 
    border: 1px solid blue; 
 
    width: 350px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
#canvas { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Container=blue, Canvas=red</h4> 
 
Width:&nbsp 
 
<input type=range id=containerWidth min=100 max=500 value=350> 
 
<br>Height:&nbsp 
 
<input type=range id=containerHeight min=100 max=300 value=200> 
 
<div id=container> 
 
    <canvas id="canvas" width=300 height=150></canvas> 
 
</div>

來源

2014-10-06 05:22:49 markE

我建議一個小的CSS的調整，應該爲你工作。

#container { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    position:relative; 
} 

canvas { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

position:absolute元件應該一般通過position:relative父容器包圍。設置realtive至#container將使相對於其父母的偏移canvas爲#container。這是Demo.

來源

2014-10-06 07:23:45 Rohit416

我可以使用哪些CSS來縮放畫布以填充容器而不更改其高寬比？

回答

相關問題