动态检测屏幕高度和屏幕宽度以更改图像的高度和宽度

Question

我只能在 portrait 中使用 display 一个 div 标签，如 corrl in post response[=27= 所述，使用下面的代码]

<script context="module">
    import Viewport from 'svelte-viewport-info'
</script>

<div class="only-portrait">
    only visible in Portrait Mode
</div>

<style>
    :global(.Landscape .only-portrait) {
        display: none;
    }
    :global(.Portrait .only-portrait) {
        display: block;
        background: black;
        color: white;
        padding: 2rem;
    }
</style>

按预期工作

但是在 portrait 模式下，当视口的尺寸更具体是 height.viewport <= 133% of width.viewport

时，图像元素尺寸之一（高度和宽度）需要减小

我尝试使用 Inner and Outer window bindings

中的代码获取 viewport height 和 width

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

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

尝试使用 jquery 根据条件更改图像的宽度和高度 viewport.width*1.33 <= viewport.height

如前所述导入 jquery 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 />

我遇到了这个错误

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)

好像不明白这里出了什么问题！

如何进行这项工作？或者有一个简单的解决方案吗？

Answer 1

正如评论中所建议的，您可以在 <svelte:window> 中使用绑定来跟踪大小。（注意变量只是声明了let innerHeight = 0，不需要$:）
然后，您可以根据这两个值声明一个反应变量（此处为 $:），这两个值会根据您所追求的条件生成 true 或 false。要调整图像大小，您可以再次使用 class 和 class: directive，以便在条件为 true 时添加 class。（请注意，条件 class 的声明必须在之后在 <style> 标记或样式表中的基本 class 之后，因此值会被覆盖。 )

这是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-basic"
         class:image-conditional={condition}
         />

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

</style>

动态检测屏幕高度和屏幕宽度以更改图像的高度和宽度

Dynamically detection of screen height and screen width to change the height and width of an image in svelte

css

jquery

svelte