image/playground/app/pages/responsive.vue at 7efbe6779bc48c08a92eb3d35f561cf9cf08fd13 · nuxt/image · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
  <div class="container">
    <!-- <h2>nuxt-img</h2>
    <NuxtImg
      :sizes="{ sm: 100, md: 500 }"
      src="/images/damavand.jpg"
      alt=""
    />

    <h2>nuxt-picture</h2>
    <NuxtPicture
      :sizes="{ sm: 100, md: 500 }"
      src="/images/damavand.jpg"
      alt=""
    /> -->
    <div style="width: 50vw">
      i'm 50vw
    </div>
    <nuxt-img
      src="/logos/nuxt.png"
      sizes="sm:100vw md:50vw lg:400px"
      loading="lazy"
      alt=""
    />
    <br>
    <nuxt-picture
      src="/logos/nuxt.png"
      sizes="sm:100vw md:50vw lg:400px"
      loading="lazy"
      alt=""
    />

    <div style="width: 50vw; background-color: red">
      i'm 50vw
    </div>
    <nuxt-img
      src="/logos/nuxt.png"
      sizes="sm:100vw md:50vw lg:400px"
      placeholder
      class="responsive-placeholder-img"
      alt=""
    />
  </div>
</template>

<style scoped>
.responsive-placeholder-img {
  width: 400px
}

@media (max-width: 768px) {
  img2 {
    max-width: 50vw;
    width: 50vw;
  }
  .responsive-placeholder-img {
    width: 50vw;
  }
}

@media (max-width: 640px) {
  img2 {
    max-width: 100vw;
    width: 100vw;
  }
  .responsive-placeholder-img {
    width: 100vw;
  }
}

img2 {
  max-width: 300px;
  width: 300px;
}
</style>