Squeak.ru - шаблоны программирования

Bootstrap 4 img-fluid: как мне сделать одинаковую высоту для изображений на мобильных устройствах в карусели

У меня есть карусель изображений Bootstrap 4.

Часть изображений альбомная, часть портретная.

Я использую класс .img-fluid для всех изображений карусели, который применяет max-width: 100%; и height: auto; к изображениям.

Изображения в альбомном режиме выглядят нормально, но портретные изображения выше, что делает карусель непоследовательной, поскольку для высоты установлено значение «авто».

Есть ли простой способ применить CSS, чтобы сделать высоту всех моих карусельных изображений одинаковой, не искажая более высокие портретные изображения?

Этот вопрос не помог мне в этом вопросе.

html css bootstrap-4
15.06.2018

  • Вы можете применить к контейнеру фиксированную ширину, чтобы все изображения оставались внутри. 15.06.2018
  • @ZohirSalakCeNa проблема в высоких портретных изображениях. Применение фиксированной ширины к контейнеру не решает эту проблему, а применение фиксированной высоты переопределяет height: auto класса .img-fluid. 15.06.2018
  • Вы можете иметь разные изображения с разной высотой и ожидать, что они будут отзывчивыми, здесь проблема с автоматической высотой, вы либо устанавливаете фиксированную высоту и ширину для контейнера, либо максимальную высоту/ширину для изображений. 15.06.2018
  • Спасибо @ZohirSalakCeNa, решил эту проблему, добавив height в контейнер и max-height в класс .img-fluid. 15.06.2018
  • Это была опечатка, я имел в виду can't, в любом случае рад помочь :) 15.06.2018
Новые материалы
Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...