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 断点 object 的指令来控制它们将加载的视口。

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

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