Vuetify Carousel Images Not Scaling to Viewport

Question

I'm trying to build an artist portfolio website with a carousel of images, using the vuetify carousel. The images in my portfolio are all different sizes and scales, so the carousel scales the image to the max width of the carousel viewport. Obviously, I don't want this, but I haven't been able to find an option to unscale the images. This is the code I'm using:

<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 Carousel Images Not Scaling to Viewport

0 Answers0