Question

目前正在学习javascript，无法理解这一点，或者为什么它无法正常工作。

我尝试使用基于视口尺寸的javascript变量来调整div的大小（因此div会针对手机的尺寸进行扩展或缩小，或者当您从横向切换时肖像。）

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

此外，我可以确认图像在我设置的目录中（因为有一次我有这个工作，但后来我打破了背景。背景目前正在工作）。

这是迄今为止的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只是＆lt; div ID =＆＃39; cloud＆＃39;＆gt;＆lt; / DIV＆GT; （没有空格）。

如果有更简单的方法，请告诉我！任何帮助非常感谢！

Answer 1

你不需要使用JS，CSS就可以了。只需将“width：100％”添加到#cloud，并确保#cloud相对于跨越整个屏幕宽度的容器。

Answer 2

对于事件是bind，您应该声明函数resizeCloud并将其绑定到外部。

// Declare function
function resizeCloud() {
    $('#cloud').css('width', windowWidth + 'px');
    $('#cloud').css('height', windowHeight + 'px');
};

$(window).resize(resizeCloud); // Bind event

另外，请注意css方法的参数：http://api.jquery.com/css/

无论如何，您正在尝试使用javascript进行CSS解决方案。

使用基于视口尺寸的javascript变量来改变CSS属性

2 个答案: