更改圖像/svg 以在網頁上正確顯示橫向或縱向

Question

當我將 Window 大小從橫向更改為縱向時，頁面無法正確刷新

如何更改頁面代碼以顯示正確尺寸的橫向或縱向 svg

風景。svg 與肖像略有不同。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

Answer 1

它不起作用，因為您的 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