Vuetify: [Bug Report] Carousel is responsive but not the images it contains

[begueradj]

Versions and Environment

Vuetify: 1.5.6
Vue: 2.6.8
Browsers: Firefox 65.0
OS: Ubuntu undefined

Steps to reproduce

Try any example provided in the documentation

Expected Behavior

On mobile, not only the carousel should be responsive, but also the images it contains.

Actual Behavior

The carousel is responsive, but the images it contains are not. I get an ugly display of the images on mobile as only the middle portion of each image is displayed.

Reproduction Link

https://codepen.io/begueradj-the-sasster/pen/eXyJdB?&editable=true&editors=101

Other comments

Thank you,
Billal Begueradj

[KaelWD]

It has a default height of 500px, set it to "auto" instead. Note #6067

[begueradj]

Thank you, but this not about the height of the images/carousel. My issue is about the responsiveness of images in width @KaelWD

[KaelWD]

What do you want then? contain?

[begueradj]

The width of the carousel and its images should be the same and responsive. That is what I hope to see. When I set height to auto, I see the responsiveness works well on both (carousel & images) but the carousel becomes too small (in terms of length) on mobile. @KaelWD

[peluprvi]

@begueradj
If you are looking for aspect ratio or v-responsive for you app, please see https://vuetifyjs.com/en/framework/aspect-ratios

The only reason it has a fixed height and is not wrapped by a v-responsive to apply aspect ratio is to avoid complex examples for newcomers.

But if you don't like how v-carousel looks like, please don't be afraid and feel free to send a PR with your suggestion so the team can take a better a look. Examples code are at https://github.com/vuetifyjs/vuetify/tree/master/packages/docs/src/examples/carousels .

Thank you for your contribution in advance. We are always trying to improve docs and listening all opinions.

[gpavey]

Why is this closed? @begueradj is correct. The carousel is responsive but the images inside the carousel are not responsive. This should be fixed.

[Rorrenoa]

I'm not sure but when I overwrote .v-image__image--cover globally with background-size: auto 100%! Important or background-size: 100% auto!Important it worked
Maybe that helps someone 😃

[yaayes]

I know this old thread, but just for reference for anyone later!!

Set height prop to "auto" as @KaelWD and a default slot for v-carousel-item instead of src prop, the default slot should contain a v-img component with aspect-ratio desired, in my case is something like this:

<v-carousel height="auto" show-arrows-on-hover>
  <v-carousel-item v-for="(image, index) in product.images" :key="index">
    <v-img :src="image.uri" aspect-ratio="1.77"></v-img>
  </v-carousel-item>
</v-carousel>