CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.js
Andath
Andath

Reputation: 22724

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.

Upvotes: 0

Views: 4362

Answers (4)

M.Gh
M.Gh

Reputation: 59

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>

Upvotes: 0

Steve
Steve

Reputation: 69

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.

Upvotes: 0

ZioTino
ZioTino

Reputation: 173

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.

Upvotes: 1

Blue Eyed Behemoth
Blue Eyed Behemoth

Reputation: 3872

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

Upvotes: 1

Related Questions