javascript - 更改图像/svg 以在网页上正确显示横向或纵向

标签 javascript html css svg

当我将窗口大小从横向更改为纵向时,页面不刷新 正确

我如何更改页面代码以显示正确大小的横向或纵向 svg

landscape.svg 与 portrait.svg 略有不同

请帮忙

    <script>
    if(window.innerHeight > window.innerWidth)
    {

        // Portrait
        //alert ("Resized..P");
        document.write( '<object id=\"svg-objectp\" data=\"car1-portrait.svg\" type=\"image/svg+xml\"></object>' );
        document.getElementById("svg-objectp").style.width = "100%"; 
        document.getElementById("svg-objectp").style.height = "auto"; 

        }else{

        // Landscape
        //alert ("Resized..L");
        document.write( '<object id=\"svg-objectl\" data=\"car1-landscape.svg\" type=\"image/svg+xml\"></object>' );
        document.getElementById("svg-objectl").style.width = "100%"; 
        document.getElementById("svg-objectl").style.height = "auto"; 

    }
    </script>

    http://www.qurantour.com/car/index.html

最佳答案

它不起作用,因为你的 javascript 代码只执行一次,你需要一个事件让它起作用:

    <script>
    window.onresize = function() {
      if(window.innerHeight > window.innerWidth)
      {

      // Portrait
      //alert ("Resized..P");
      document.write( '<object id=\"svg-objectp\" data=\"car1-portrait.svg\" 
      type=\"image/svg+xml\"></object>' );
      document.getElementById("svg-objectp").style.width = "100%"; 
      document.getElementById("svg-objectp").style.height = "auto"; 

      }else{

      // Landscape
      //alert ("Resized..L");
      document.write( '<object id=\"svg-objectl\" data=\"car1-landscape.svg\" 
      type=\"image/svg+xml\"></object>' );
      document.getElementById("svg-objectl").style.width = "100%"; 
      document.getElementById("svg-objectl").style.height = "auto"; 

    }
  }
  </script

关于javascript - 更改图像/svg 以在网页上正确显示横向或纵向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58357668/

相关文章:

javascript - 在动态创建的复选框列表中一键选中 2 个复选框

javascript - 如何在 angularjs 表单字段中输入多个电子邮件 ID?

javascript - 整页大小的背景图片

响应定价表的 HTML/CSS 框大小或填充问题 - 找不到父设置 - 实例 - 新手 :-)

css - 改变特异性

html - CSS - 使用 Bootstrap 从行和列中删除所有宽度

javascript - 如何检查复选框是否被选中?

html - 为响应式布局发布混合 px 和 %

javascript - 如果标记了复选框,则复制 TR 元素并附加到外部源

javascript - 关闭 Bootstrap 警报