javascript - Vuetify 根据屏幕大小更改图像的位置

Question

我正在使用 Vuetify，我正在尝试获取图像以更改较小屏幕的图像位置。

我当前的代码:https://codepen.io/yash-dhume/pen/pozMQBg?&editable=true&editors=101

<section>
  <v-container fluid justify-space-between>
    <v-layout column>
      <v-card transition="slide-x-transition">
        <v-layout row justify-space-around align-center>
          <v-flex xs7 align-center justify-center layout text-xs-straight>
            <v-card-title primary-title class="justify-center">
              <div>
                <div class="display-2">About Me</div>
                <p class="text-justify al">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
                  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                  sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
              </div>
            </v-card-title>
          </v-flex>
          <div>
            <img max-width="300" src="https://loremflickr.com/640/360"> </img>
          </div>
          <div class="fill-height bottom-gradient"></div>
        </v-layout>
      </v-card>
    </v-layout>
  </v-container>
</section>

我希望图像位于“关于我”标题下方，然后是中型或小型屏幕上的段落。

我该怎么做？

Answer 1

您可以将图像元素放在您希望它可能显示的两个位置。然后将 v-if 指令添加到每个指令，并使用具有适当 vuetify 断点对象的指令来控制它们将加载的视口(viewport)。

<img v-if="$vuetify.breakpoint.mdAndDown"  max-width="300" src="https://loremflickr.com/640/360"> </img>

在此处阅读有关断点对象的更多信息:https://vuetifyjs.com/en/customization/breakpoints