'v-carousel is responsive but not the images it contains

When I use v-carousel, everything works fine, except I noticed on mobile even if the carousel itself is responsive, the images inside it are not, so only the middle portion of each picture is shown:

 <v-carousel hide-delimiters>
    <v-carousel-item
       v-for="(item,i) in items"
       :key="i"
       :src="item.src"
     ></v-carousel-item>
 </v-carousel>

How can I overcome this problem? I want to see the images inside the carousel to be responsive also.

javascriptcssvue.jsvuetify.js


Solution 1:[1]

I checked out v-carousel and it looks like they're divs with the images set as the background image, so you're looking for the background-size css and have it set to background-size: cover and you should be set. For more details, check out W3 here

EDIT: Looking more into v-carousel, it looks like the image formatting is set up in the API here

Solution 2:[2]

I don't know how v-carousel works, however, just looking at the html generated the carousel is using background images and this prevents your image to be responsive.

I suggest you to change carousel or search for an option that lets you change the way that the image is placed.

With an img tag you can set in your css max-width: 100% and your image will be responsive.

Solution 3:[3]

Just add height="auto" on the <v-carousel> like so:

<v-carousel height="auto" hide-delimiters>

The carousel will then become responsive and image will shrink according to your container / screen width.

Solution 4:[4]

I checked v-carousel-item and I found it's an image and then with checking the v-img in vuetify, I found with adding contain to v-carousel-item, you can force the image to show all areas and prevent the image from being cropped if it doesn't fit. your code should change to this:

<v-carousel hide-delimiters>
    <v-carousel-item
       v-for="(item,i) in items"
       :key="i"
       :src="item.src"
       contain
     ></v-carousel-item>
</v-carousel>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ZioTino
Solution 3 Steve
Solution 4 M.Gh

Related Questions