Как установить размер изображения карусели - PullRequest
Новая
       21

Как установить размер изображения карусели

0 голосов
/ 06 сентября 2018

В моем 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>

Но мои попытки изменить стиль ничего не изменили ...

Если есть действительный путь?

Спасибо!

Ответы [ 4 ]

0 голосов
/ 14 мая 2019 
<v-carousel height="auto">
 <v-carousel-item></v-carousel-item>
</v-carousel>

введите описание ссылки здесь На основании Vuetify документации

0 голосов
/ 06 сентября 2018

Как я видел, изображения устанавливаются в качестве фоновых изображений, для <div class="v-image__image--cover"></div>. Они не отображаются на DOM как изображения (например: <img src="image_src" />). Поэтому, если вы хотите изменить вид изображения, вы должны переопределить свойства CSS этого div, например, свойства фона (background-position, background-size ...).

Я не уверен, что это правильный способ или нет, но если вы хотите изменить высоту элемента, вам необходимо переопределить высоту карусели (<v-carousel>), потому что высота <v-carousel-item> определяется высотой самой карусели, или Вы должны переопределить всю структуру карусели (изменить позиции и некоторые другие свойства CSS).

Но есть одна проблема, я думаю, вы хотите визуализировать изображения разной высоты на одной высоте, чтобы она не отключала вид. Это общая проблема для разработчиков переднего плана. Кстати, одним из лучших способов решения этой проблемы является структура, которую вы пытаетесь переопределить.

0 голосов
/ 22 сентября 2018

@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>
0 голосов
/ 06 сентября 2018

Try ... 

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

...