基于断点设置图像高度开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

文章/答案/技术大牛

发布

<v-img 
  :height="img.height.xs" 
  :sm="img.height.sm"
  :md="img.height.md"
  :lg="img.height.lg"
  :xl="img.height.xl">
</v-img>

<div class="h-8 sm:h-12 md:h-16 lg:h-20 xl:h-24"></div>

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="400"
      <v-img
        class="white--text align-end"
        src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
        :height="imageHeight"
      ></v-img>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
      imageHeight () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return '200px'
          case 'sm': return '400px'
          case 'md': return '600px'
          case 'lg': return '800px'
          case 'xl': return '1000px'
})

<v-img
    class="white--text align-end"
    src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    :height="$vuetify.breakpoint.xs 
                ? '200px' 
                : ($vuetify.breakpoint.sm
                    ? '400px' 
                    : ($vuetify.breakpoint.md
                        ? '600px'
                        : ($vuetify.breakpoint.lg
                            ? '800px' 
                            : '1000px'
></v-img>

@media #{map-get($display-breakpoints, 'md-only')}

回答 2

Stack Overflow用户

Stack Overflow用户