javascript - 使用基于视口(viewport)尺寸的 JavaScript 变量来更改 CSS 属性

Question

目前正在学习 javascript，无法理解这个问题，或者为什么它不起作用。

我正在尝试使用基于视口(viewport)尺寸的javascript变量来调整div的大小(因此div将专门针对手机尺寸或当您从横向切换到纵向时扩展或缩小。)

目前，在 Chrome 检查器中，它在 0 0(左上角)处显示 div，尺寸为 0px x 0px。console.log 确实提供了视口(viewport)的尺寸，并建议它显示为纵向还是横向。

此外，我可以确认图像位于我设置的目录中(因为在某一时刻我可以正常工作，但后来我破坏了背景。背景当前再次工作)。

这是到目前为止的 JavaScript -

   $(document).ready(function() {

   //Variables for viewport height and width.
     var windowWidth = $(window).width();
     var windowHeight = $(window).height();

   //resizeCloud function alters cloud image size by append cloud ID to include H & W variables
    function resizeCloud() {
       $('#cloud').css('width: ',windowWidth + 'px');
       $('#cloud').css('height: ',windowHeight + 'px');
       $(window).resize(resizeCloud);
     };

  //Will advise if app is in portrait or landscape
  console.log("width: " + windowWidth);
  console.log("height: " + windowHeight);
   if (windowWidth < windowHeight) {
      console.log("Portrait mode");
    } else {
      console.log("Landscape mode");
   };

});

还有 CSS -

 #cloud {
   background-image: url('images/cloud.png');
   position: absolute;
   top: 0;
   left: 0;
   background-size: contain;

HTML 只是 < div ID='cloud'>