Question

在我的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>

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

如果有有效的方法？

谢谢！

Answer 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的默认位置。

Answer 2

我看到<div class="v-image__image--cover"></div>的图像被设置为背景图片。它们没有作为图像在DOM上呈现（例如：<img src="image_src" />）。因此，如果要更改图像视图，则必须覆盖该div的CSS属性，例如背景属性（background-position，background-size ...）。

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

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

Answer 3

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

Answer 4

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

enter link description here 基于Vuetify文档

Answer 5

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

<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 个答案: