Dynamically detection of screen height and screen width to change the height and width of an image i-CodePudding

I was able to display a div tag only in portrait using the code below as mentioned by

I tried to get the viewport height and width using code from Inner and Outer window bindings

<script>
    $: outerWidth = 0
    $: outerHeight = 0
</script>

<svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />

Tried using jquery to change the width and height of image based on condition viewport.width*1.33 <= viewport.height

imported jquery as mentioned here

<script lang="ts">
  import jQuery from 'jquery';
  import { onMount } from 'svelte';
  onMount(() => {
    window.jQuery = jQuery;
    
  jQuery(window).resize(function(event){
  console.log(outerWidth*1.33,' ',outerHeight);
  if(outerWidth*1.33 <= outerHeight) {
   jQuery(".imageclass").each(function() {
  jQuery(this).attr("width", "78vw");  jQuery(this).attr("height", "78vw/2.81vh");
  });} 

  });

});
</script>
<svelte:window  bind:outerWidth bind:outerHeight />

I am getting this error

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)

Don't seem to understand what is going wrong here!

How to make this work? or is there a simple solution for this?

CodePudding user response：

As proposed in the comments you can use bindings inside <svelte:window> to track the size. (Note that the variables are just declared let innerHeight = 0, they don't need $:)
Then you can declare a reactive variable (here the $:) based on the two values which results to true or false based on the condition you're after. For resizing the image you can again use a class and the class: directive so the class is added if the condition is true. (Note that the declaration of the conditional class must come after the basic class inside the <style> tag or stylesheet, so the values get overwritten.)

Here's the REPL

<script>
    let innerWidth = 0
    let innerHeight = 0
    
    $: condition = innerWidth*1.33 <= innerHeight
</script>

<svelte:window bind:innerWidth bind:innerHeight />

<p> Inner Width: {innerWidth} </p>
<p> Inner Height: {innerHeight} </p>
<p> condition: {condition} </p>

<img src="https://svelte.dev/svelte-logo-horizontal.svg" alt=""
         
         class:image-conditional={condition}
         />

<style>
    .image-basic {
        width: 100vw;
    }
    .image-conditional {
        width: 50vw;
    }

</style>