Question

我正在尝试使用vuetify轮播构建带有图片轮播的艺术家作品集网站。我的作品集中的图像大小和比例都不同，因此轮播会将图像缩放到轮播视口的最大宽度。显然，我不希望这样，但是我一直找不到能够缩放图像的选项。这是我正在使用的代码：

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div class="wrapper">
    <main>
      <div id="app">
        <v-app id="inspire" dark>
          <v-carousel>
            <v-carousel-item v-for="(item,i) in items" :src="item.src" :key="i"></v-carousel-item>
          </v-carousel>
        </v-app>
      </div>
    </main>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          items: [
            {
              src: 'img/ama_nerd_self_portrait.png'
            },
            {
              src: 'img/office.jpg'
            },
            {
              src: 'img/dystopian.jpg'
            }
          ]
        }
      }
    })
  </script>
</body>

Vuetify轮播图片无法缩放到视口

0 个答案: