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断点对象的伪指令来控制它们将在哪些视口上加载。

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

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

根据屏幕尺寸来查看更改图片的位置

1 个答案: