How in vuetify to set size of carousel images - image

Question

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!

Answer 1

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.

Answer 2

<v-carousel height="auto">
<v-carousel-item></v-carousel-item>
</v-carousel>
enter link description here
Based on Vuetify Documentation

Answer 3

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.

Answer 4

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>

Answer 5

#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>