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