Масштабирование img в слайдер bootstrap

Подскажите пожалуйста, можно ли как то обойти масштабирование слайдера бутстрапа? Я генерирую набор картинок на js и и вывожу в .carousel-inner

Картинки очень большого разрешения с текстом и таблицами, и при маленьком разрешении текст становится нечитабелен.

Основная роблема в том, что при масштабировании окна средствами браузера изменяются лишь элементы верстки (кнопки и индикаторы), масштаб изображения в слайдер остается неизменным. Я полагаю это из-за класса w-100 который заполняет всю ширину родительского блока для img.

Попробуйте увеличить масштаб окна с бутстраповским слайдером и вы поймете о чем я. https://jsfiddle.net/5kyL6ma3/17/ В итоге у меня выходит так, классы бутстрапа я не переопределяю:

<div class="carousel-inner">
 <div class="carousel-item">
   <img class="d-block w-100" src="images/png/page1.png">
 </div>
 <div class="c`введите сюда код`arousel-item">
   <img class="d-block w-100" src="images/png/page2.png">
 </div>
 <div class="carousel-item">
   <img class="d-block w-100" src="images/png/page3.png">
 </div>
</div>

Понимаю, что все это криво, и по хорошему надо текст верстать отдельно, но может можно как-то обойти? Уж очень не хочется прикручивать лупу ко всему этому.