При использовании Bootstrap 3.4.1 существует несколько способов сделать изображения адаптивными. Вот некоторые из них:

1. Адаптивные изображения с классами Bootstrap:
   Bootstrap предоставляет набор классов адаптивных изображений, которые вы можете применять к своим изображениям. Эти классы включают img-Response, который пропорционально масштабирует изображение, чтобы оно поместилось в его контейнере, и img-fluid, который заставляет изображение занимать всю ширину контейнера, пока сохраняя соотношение сторон.

   Пример:

   <img src="image.jpg" class="img-responsive" alt="Responsive Image">

2. Медиа-запросы CSS.
   Вы можете использовать медиазапросы CSS для определения разных стилей для разных размеров экрана. Установив для свойства max-widthизображения значение 100 %, вы можете плавно изменять его размер внутри контейнера.

   Пример:

   <style>
    img {
      max-width: 100%;
      height: auto;
    }
    @media (max-width: 768px) {
      img {
        max-width: 50%;
      }
    }
   </style>
   <img src="image.jpg" alt="Responsive Image">

3. Элемент изображения и исходные наборы.
   Элемент и атрибут srcsetможно использовать для предоставления разных источников изображений для разных размеров экрана. и резолюции. Это позволяет браузеру выбирать наиболее подходящее изображение для отображения в зависимости от возможностей устройства.

   Пример:

   <picture>
    <source srcset="image-large.jpg" media="(min-width: 768px)">
    <source srcset="image-medium.jpg" media="(min-width: 480px)">
    <img src="image-small.jpg" alt="Responsive Image">
   </picture>

4. Решения на JavaScript/jQuery.
   Вы также можете использовать плагины JavaScript или jQuery для обработки адаптивных изображений. Эти плагины динамически регулируют размер изображения в зависимости от размера экрана.

   Пример (с использованием плагина jQuery «responseive-img»):

   <script src="jquery.min.js"></script>
   <script src="responsive-img.js"></script>
   <img src="image.jpg" class="responsive-img" alt="Responsive Image">
   <script>
    $('.responsive-img').responsiveImg();
   </script>