Блог

Главная - Вопросы по программированию - v-carousel реагирует, но не на содержащиеся в нем изображения

v-carousel реагирует, но не на содержащиеся в нем изображения

#javascript #css #vue.js #vuetify.js

#javascript #css #vue.js #vuetify.js

Вопрос:

Когда я использую v-carousel, все работает нормально, за исключением того, что я заметил на мобильных устройствах, даже если сама карусель отзывчива, изображения внутри нее нет, поэтому отображается только средняя часть каждого изображения:

  <v-carousel hide-delimiters>
    <v-carousel-item
       v-for="(item,i) in items"
       :key="i"
       :src="item.src"
     ></v-carousel-item>
 </v-carousel>

Как я могу преодолеть эту проблему? Я хочу, чтобы изображения внутри карусели также были отзывчивыми.

Ответ №1:

Я проверил v-carousel, и похоже, что они div с изображениями, установленными в качестве фонового изображения, так что вы ищете background-size css и установили для него значение background-size: cover , и оно должно быть установлено. Для получения более подробной информации ознакомьтесь с W3 здесь

РЕДАКТИРОВАТЬ: При более детальном рассмотрении v-carousel, похоже, что форматирование изображений настроено в API здесь

Комментарии:

1. Я попробовал, active-class установив класс CSS, определенный, как вы сказали, но это не работает. Спасибо за отзыв

2. Похоже, это зависит от браузера?

3. Я пробовал оба aspect-ratio и active-class , но безрезультатно. Любой пример, приведенный здесь в документации , может быть использован для прямой онлайн-игры.

4. Да, я тоже так делал

5. Если contain имеет значение true, то изображения будут обрезаны

Ответ №2:

Я не знаю, как работает v-carousel, однако, просто взглянув на сгенерированный html, карусель использует фоновые изображения, и это мешает вашему изображению быть отзывчивым.

Я предлагаю вам изменить carousel или поискать опцию, которая позволяет изменить способ размещения изображения.

С помощью тега img вы можете установить в своем css max-width: 100% , и ваше изображение будет отзывчивым.

Ответ №3:

Просто добавьте height="auto" на <v-carousel> вот так:

 <v-carousel height="auto" hide-delimiters>

Затем карусель станет отзывчивой, и изображение будет уменьшаться в соответствии с шириной вашего контейнера / экрана.

Ответ №4:

Я проверил v-carousel-item и обнаружил, что это изображение, а затем, проверив v-img в vuetify, я обнаружил, что с помощью добавления contain в v-carousel-item вы можете принудительно отобразить все области изображения и предотвратить обрезку изображения, если оно не подходит. ваш код должен измениться на это:

 <v-carousel hide-delimiters>
    <v-carousel-item
       v-for="(item,i) in items"
       :key="i"
       :src="item.src"
       contain
     ></v-carousel-item>
</v-carousel>