How in vuetify to set size of carousel images

Admin 1
Viewed 17612

In my Laravel 5.6/"vue": "^2.5.7/"vuetify": “^1.0.8” application I use carousel of images ( https://vuetifyjs.com/en/components/carousels#introduction )

it works but if there are uploaded images of different size the images are partly cut and view is broken. I tried to make like :

            <v-carousel>
                <v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :src="nextArtistImage.image_url" :key="nextArtistImage.id"
                                 :alt="nextArtistImage.image_url" style="width: 200px;height:auto;">
                    <div class="carousel_image_title">{{ nl2br(concatStr(nextArtistImage.description, 100)) }}</div>
                </v-carousel-item>
            </v-carousel>

But my attempts to change style did not alter anything...

If there is a valid way ?

Thanks!

carousel vuetify.js image
5 Answers

Try...

       <v-carousel>
                <v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :key="nextArtistImage.id">
<img :src="nextArtistImage.image_url" style="width:200px;height:auto;" :alt="nextArtistImage.image_url"/>
                </v-carousel-item>
            </v-carousel>

The above html takes advantage of the default slot for the v-carousel-item.

user_18825930 
<v-carousel height="auto">
 <v-carousel-item></v-carousel-item>
</v-carousel>

enter link description here Based on Vuetify Documentation

user_55755450

As I saw images are set as background pictures, for <div class="v-image__image--cover"></div>. They are not rendering on DOM as images (for example: <img src="image_src" />). So if you want to change image view, you have to override css properties of that div, for example background properties (background-position, background-size ...).

I am not sure it is a valid way or not, but if you want to change item's height you have to override carousel's height (<v-carousel>), because the height of <v-carousel-item> determined by height of carousel itself, or you have to override whole structure of carousel (change positions and some other css properties).

But there is one issue, I guess you want to render pictures of different original heights at one height, so that it does not turn off the view. This is a common problem for front-end developers. By the way, one of the best way to solve this problem is the structure you are trying to override.

user_100460990

The code below, shows the entire image within the carousel. Set the height of the v-carousel (300 in this example) and set that same value for the v-img max-height. If there are images that that wide but short, then limits to the width should also be added.

<v-carousel cycle v-model="model" height="300">
  <v-carousel-item
    v-for="(item, i) in items"
    :key="i"
  >
    <v-img :src="item.src" contain max-height="300"></v-img>
  </v-carousel-item>
</v-carousel>

Where items is defined as:

    <script>
      export default {
        data() {
        return {
          items: [
            { src: require('@/assets/photo1.jpg') },
            { src: require('@/assets/photo2.jpg') },
          ],
        };
      },
    };
    </script>
user_1782600

@peter.edwards just a tiny mistake on your code:

<img src="nextArtistImage.image_url" style="width:200px;height:auto;" :alt="nextArtistImage.image_url"/>

Source of image cannot be loaded because is a string so the correct form should be <img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/> so the final form will be 

<v-carousel>
      <v-carousel-item
            v-for="(itemnextArtistImagei) in artistImagesList"
            :key="i"
            ><img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/>
      </v-carousel-item>
</v-carousel>
user_32487590
Related