根据屏幕尺寸来改变图像的位置

问题描述 投票:0回答:1

我正在使用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>

我希望图像在中等或小屏幕上时位于我左右标题下方,然后是下面的段落。

我该怎么做?

javascript html css vue.js vuetify.js
1个回答
0
投票

您可以将图像元素放置在希望显示的两个位置。然后将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

© www.soinside.com 2019 - 2024. All rights reserved.