使画布高度自动 [英] make canvas height auto

问题描述

我有帆布

 < canvas id =canvaswidth =1700height =679style =background-color：#ffffff; width：100％; overflow：hidden; margin-top：-7px;>< / canvas& 
  

它适用于chrome和firefox。然而，即只能与宽度：100％，但不能改变高度（679年的高度）工作

我尝试高度为自动和100％，但获得wose

编辑：finally！我知道了。
这是真的，画布内容将不好在宽度100％。
然而，对于高度（IE9以上是工作）你必须设置高度样式

  $ ）.attr（'style'，'background-color：#ffffff; width：100％; height：679px; overflow：hidden; margin-top：-7px;'）; 
  

并使用Jquery重新调整画布大小

  function resizeIE（）
 {
 canvas = document.getElementById（canvas）; 
 if（$。browser.msie）// only IE 
 {
 $（＃canvas）。attr（'style'，'background-color：#ffffff; width：100 ％; height：679px; overflow：hidden; margin-top：-7px;'）; 
 //设置高度样式首先
 
 if（window.innerWidth< 960）//用于其他设备（仅适用于我）
 {
 var height_ie = window.innerWidth * 39.941176470588235294117647058824）/ 100; 
 //使画布的比例找到pencentage 
 // ex。画布高度：1700px画布宽度：679px; 
 //（679 * 100）/ 1700 = 39.941<  -  use this one 
 //最佳解决方案
} 
 else 
 {
 var height_ie = window.innerHeight-160; // just for the logo for my web 
} 
 canvas.style.height = height_ie +px; 
} 
} 
  

/ p>

  window.onresize = function（event）{
 resizeIE 
}; 
  

解决方案

  $ #canvas）。attr（'style'，'background-color：#ffffff; width：100％; height：679px; overflow：hidden; margin-top：-7px;'）; 
  

并使用Jquery重新调整画布大小

  function resizeIE（）
 {
 canvas = document.getElementById（canvas）; 
 if（$。browser.msie）// only IE 
 {
 $（＃canvas）。attr（'style'，'background-color：#ffffff; width：100 ％; height：679px; overflow：hidden; margin-top：-7px;'）; 
 //设置高度样式首先
 
 if（window.innerWidth< 960）//用于其他设备（仅适用于我）
 {
 var height_ie = window.innerWidth * 39.941176470588235294117647058824）/ 100; 
 //使画布的比例找到pencentage 
 // ex。画布高度：1700px画布宽度：679px; 
 //（679 * 100）/ 1700 = 39.941<  -  use this one 
 //最佳解决方案
} 
 else 
 {
 var height_ie = window.innerHeight-160; // just for the logo for my web 
} 
 canvas.style.height = height_ie +px; 
} 
} 
  

重新调整大小窗口适用于document.ready

  window.onresize = function（event）{
 resizeIE 
}; 
  

I have the canvas

<canvas id="canvas" width="1700" height="679" style="background-color:#ffffff;width:100%;overflow:hidden;margin-top: -7px;"></canvas>

It work fine on chrome and firefox. However, ie can work only with width:100% but not change the height (height on 679)

I try height to be auto and 100% but getting wose

Edit: finally! I got it. It's true that the canvas content will be not good at width 100%. However, for the height (IE9 above is work) you have to set height style

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

And use Jquery to re-size the canvas

function resizeIE()
{
  canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
    $("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

    if(window.innerWidth<960) //for other device (only for me)
    {
      var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
      //to make the ratio of canvas find the pencentage
      //ex. canvas height: 1700px canvas width: 679px;
      //(679*100)/1700 = 39.941 <-- use this one
      //best solution
    }
    else
    {
      var height_ie = window.innerHeight-160; //just for the logo for my web
    }
    canvas.style.height = height_ie+"px";
 }
}

for re-size window apply on document.ready

window.onresize = function(event) {
  resizeIE();
};

解决方案

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

And use Jquery to re-size the canvas

function resizeIE()
{
canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

if(window.innerWidth<960) //for other device (only for me)
{
  var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
  //to make the ratio of canvas find the pencentage
  //ex. canvas height: 1700px canvas width: 679px;
  //(679*100)/1700 = 39.941 <-- use this one
  //best solution
}
else
{
  var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
 }
}

for re-size window apply on document.ready

window.onresize = function(event) {
  resizeIE();
};

这篇关于使画布高度自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！