如何在 vuetify 中设置轮播图像的大小答案

【问题标题】：How in vuetify to set size of carousel images如何在 vuetify 中设置轮播图像的大小
【发布时间】：2019-02-11 17:13:56
【问题描述】：

在我的 Laravel 5.6/"vue": "^2.5.7/"vuetify": "^1.0.8" 应用程序中，我使用轮播图片（https://vuetifyjs.com/en/components/carousels#introduction）

它可以工作，但如果上传了不同大小的图像，图像会被部分剪切并且视图被破坏。我试着做这样的：

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

但我改变风格的尝试并没有改变任何东西......

如果有有效的方法？

谢谢！

【问题讨论】：

转载on codepen

标签： image carousel vuetify.js

【解决方案1】：

试试……

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

上面的html利用了v-carousel-item的默认槽。

【讨论】：

【解决方案2】：

我看到图像被设置为背景图片，<div class="v-image__image--cover"></div>。它们不会在 DOM 上呈现为图像（例如：<img src="image_src" />）。所以如果你想改变图像视图，你必须覆盖那个 div 的 css 属性，例如背景属性（背景位置，背景大小......）。

我不确定这是否有效，但是如果您想更改项目的高度，则必须覆盖轮播的高度（<v-carousel>），因为<v-carousel-item> 的高度由轮播本身的高度决定，或者您必须覆盖轮播的整个结构（更改位置和其他一些 css 属性）。

但是有一个问题，我猜你想在一个高度渲染不同原始高度的图片，这样就不会关闭视图。这是前端开发人员的常见问题。顺便说一句，解决此问题的最佳方法之一是您尝试覆盖的结构。

【讨论】：

【解决方案3】：

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

enter link description here 基于 Vuetify 文档

【讨论】：

【解决方案4】：

下面的代码显示了轮播中的整个图像。设置 v-carousel 的高度（本例中为 300）并为 v-img 最大高度设置相同的值。如果有那么宽但很短的图像，则还应添加对宽度的限制。

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

其中项目定义为：

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

【讨论】：

这对我来说是正确的答案。非常感谢！

【解决方案5】：

@peter.edwards 只是您的代码中的一个小错误：

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

图片源无法加载，因为是字符串，所以正确的形式应该是<img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/>，所以最终的形式是

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

【讨论】：

感谢您的关注。编辑源以包含 src 属性的绑定。