title: Dynamically detection of screen height and screen width to change the height and width of an image in svelte
body: <p>I was able to <code>display</code> a <code>div</code> tag only in <code>portrait</code> using the code below as mentioned by <a href="https://stackoverflow.com/users/15388872/corrl">corrl</a> in <a href="https://stackoverflow.com/questions/70922264/trigger-a-js-function-on-orientationchangeend-inside-sveltebody?#answer-70922807">this</a> post response</p>
  <pre><code>&lt;script context=&quot;module&quot;&gt;
      import Viewport from 'svelte-viewport-info'
  &lt;/script&gt;
  
  &lt;div class=&quot;only-portrait&quot;&gt;
      only visible in Portrait Mode
  &lt;/div&gt;
  
  &lt;style&gt;
      :global(.Landscape .only-portrait) {
          display: none;
      }
      :global(.Portrait .only-portrait) {
          display: block;
          background: black;
          color: white;
          padding: 2rem;
      }
  &lt;/style&gt;
  </code></pre>
  <p>Worked as intended</p>
  <p>But one of image elements dimension(height and width) needs to reduce in <code>portrait</code> mode when the dimension of the viewport to be more specific is <code>height.viewport &lt;= 133% of width.viewport</code></p>
  <p><a href="https://i.stack.imgur.com/IaFBJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IaFBJ.png" alt="enter image description here" /></a></p>
  <p>I tried to get the <code>viewport</code> <code>height</code> and <code>width</code> using  code from <a href="https://svelte.dev/repl/867c433fd36a463fa5bb257cec2c1766?version=3.35.0" rel="nofollow noreferrer">Inner and Outer window bindings</a></p>
  <pre><code>&lt;script&gt;
      $: outerWidth = 0
      $: outerHeight = 0
  &lt;/script&gt;
  
  &lt;svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight /&gt;
  </code></pre>
  <p>Tried using jquery to change the width and height of image based on condition <code>viewport.width*1.33 &lt;= viewport.height</code></p>
  <p>imported jquery as mentioned <a href="https://svelte.dev/repl/355398c8d6bd4081980ed2abfc5f4286?version=3.9.2" rel="nofollow noreferrer">here</a></p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
    import jQuery from 'jquery';
    import { onMount } from 'svelte';
    onMount(() =&gt; {
      window.jQuery = jQuery;
      
    jQuery(window).resize(function(event){
    console.log(outerWidth*1.33,' ',outerHeight);
    if(outerWidth*1.33 &lt;= outerHeight) {
     jQuery(&quot;.imageclass&quot;).each(function() {
    jQuery(this).attr(&quot;width&quot;, &quot;78vw&quot;);  jQuery(this).attr(&quot;height&quot;, &quot;78vw/2.81vh&quot;);
    });} 
  
    });
  
  });
  &lt;/script&gt;
  &lt;svelte:window  bind:outerWidth bind:outerHeight /&gt;
  </code></pre>
  <p>I am getting this error</p>
  <blockquote>
  <p>File: /home/Documents/sve/svelteDemo/src/App.svelte   29 |
  import { MetaTags } from 'svelte-meta-tags';   30 |  import
  'svelte-viewport-info';   31 |  import jQuery from 'jquery';
  |                      ^   32 |  import { onMount } from 'svelte';   33 |  import image1v from './assets/image1.png';
  at formatError (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46)
  at TransformContext.error (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19)
  at normalizeUrl (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73703:26)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async TransformContext.transform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57)
  at async Object.transform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30)
  at async doTransform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)</p>
  </blockquote>
  <p>Don't seem to understand what is going wrong here!</p>
  <p>How to make this work? or is there a simple solution for this?</p>