CSS使父div不适合孩子的大小

Question

我有以下HTML：

   <div class="AnimationParent">                               
    <canvas id="canvas" width="534" height="554"></canvas>
  </div>

我正在使用javascript设置画布项目的大小，以避免动画中出现比例问题...：

   $(window).resize(function() {
                RefreshCanvasSize();                                                        
                SetLayout();
            });               

   function RefreshCanvasSize() {
            var ParentWidth, ParentHeight;

            ParentWidth = $(".AnimationParent").width();
            ParentHeight = $(".AnimationParent").height();

            $("#canvas").prop('width', ParentWidth);
            $("#canvas").prop('height', ParentHeight);                                      
   }

当我扩展页面时，以下代码有效，但在收缩页面时，以下代码无效。 父div（AnimationParent）不会缩小。

这是AnimationParent的CSS：

 width:100%;
 overflow:hidden;

有人可以帮忙吗？

问候，

Answer 1

似乎工作正常。 您能提供一个解释问题的小提琴吗？

观察：请注意，第一次运行时，画布具有固定的大小，并且只有在调整浏览器大小后才调整大小。 为了使其始终适合父级，您还需要在$(document).ready(...)上调用RefreshCanvasSize() 。

（我将其添加为注释，但是通过这种方式，我可以提供带有代码示例的代码段）

 $(window).resize(function() { RefreshCanvasSize(); //SetLayout(); }); function RefreshCanvasSize() { var ParentWidth, ParentHeight; ParentWidth = $(".AnimationParent").width(); ParentHeight = $(".AnimationParent").height(); $("#canvas").prop('width', ParentWidth); $("#canvas").prop('height', ParentHeight); console.log($("#canvas").prop('width'), $("#canvas").prop('height')) } 

 canvas { background: red; } .AnimationParent { background: blue; width: 100%; overflow:hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="AnimationParent"> <canvas id="canvas" width="534" height="554"></canvas> </div>