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

文章/答案/技术大牛

发布

<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')}

推荐文章

威武的蜡烛 · 调用IPv6网关API的请求结构.授权与签名-阿里云帮助中心

1 年前

一身肌肉的板栗 · Caused by: java.rmi.ConnectException: Connection refused to host: 220.250.64.26; nested exception is

1 年前

霸气的大蒜 · LLM - 1 Vicuna/Alpaca语言模型本地部署 - 哔哩哔哩

2 年前

乐观的竹笋 · Js 拦截全局 ajax 请求 - 掘金

2 年前

讲道义的鸡蛋 · 如何自动导出Power BI 报表并以电子邮件的方式发送 - 腾讯云开发者社区-腾讯云

2 年前

回答 2

Stack Overflow用户

Stack Overflow用户