JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<link rel="shortcut icon" href="assets/V.ico" />
<div class="row">
  <div class="col-3 marg" href="#myCarousel" data-slide-to="0">
    <img src="https://preview.ibb.co/cUrJE6/005.jpg" data-toggle="modal" data-slide-to="0" data-target="#myModal" style="height: 300px;" class="hover-shadow cursor w-100 d-block">
  </div>

  <div class="col-3 marg" href="#myCarousel" data-slide-to="1">
    <img src="https://image.ibb.co/iBbPnR/006.jpg" data-toggle="modal" data-slide-to="1" data-target="#myModal" style="height: 300px;" class="hover-shadow cursor w-100 d-block">
  </div>

  <div class="col-3 marg" href="#myCarousel" data-slide-to="2">
    <img src="https://preview.ibb.co/dmo11m/003.jpg" data-toggle="modal" data-slide-to="2" data-target="#myModal" style="height: 300px;" class="hover-shadow cursor w-100 d-block">
  </div>
</div>

<div id="myModal" class="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="https://preview.ibb.co/cUrJE6/005.jpg">
            </div>

            <div class="carousel-item">

              <img class="d-block w-100"...

CSS

.carousel-caption {
  color: black;
  text-shadow: 2px 0px 4px white;
  font-weight: bold;
}

#myModal > .modal-dialog {
  max-width: 90vw;
  display: table;
}

/* Pár nových stylů aby vše pěkně ladilo, je třeba nastavit classu carousel-fade v carouselu */

#myCarousel > .carousel-inner > .carousel-item > img {
  max-height: 90vh;
  height: 90vh;
}

.carousel-fade .carousel-inner .carousel-item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active-left,
.carousel-fade .carousel-inner .active-right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next-left,
.carousel-fade .carousel-inner .prev-right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

JavaScript

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

// Pause the carousel
$("#myCarousel").carousel('pause');

// element = carousel-item
function resizeElement(element)
{
	console.log(element);
	// výška obrázku v browseru - lze nahradit něčím jiným
	var vyska = ($(window).height() / 100 ) * 90;
  // reálná šířka obrázku, selektor je dělaný přesně na tuto aplikaci, případně nahraď vhodnějším
  var sirkaReal = element.children()[0].naturalWidth;
  // reálná výška obrázku, selektor je dělaný přesně na tuto aplikaci, případně nahraď vhodnějším
  var vyskaReal = element.children()[0].naturalHeight;
  // zapomocí trojčlenky zjistím jakou šířku použít
  var sirka = (vyska / vyskaReal) * sirkaReal;
  
  // už jen animuji aby vše vypadalo pěkně
  element.parent().animate({
    width: sirka
  }, 500);
}


$('#myCarousel').on('slide.bs.carousel', function(e) {
  resizeElement($(e.relatedTarget));
});

// Nesmíš měnit velikost okna až moc rychle, jinak se to zabuguje - opravit, případně
$(window).resize(function() {
	resizeElement($('.active.carousel-item'));
})