如何修复轻拂幻灯片中消失的图像？

Question

很奇怪，在我的Flickity幻灯片中，开头不可见的图像没有宽度，或者在滚动浏览时消失了。在manuelauer.at上的错误示例，如何在不设置固定像元宽度的情况下解决此问题（由于图像大小会有所不同）–固定像元宽度的问题无法解决，但我想在未定义此类的情况下进行修正。

<link rel="stylesheet" href="https://manuelauer.at/scripts/flickity.css">
<script src="https://manuelauer.at/scripts/flickity.pkgd.js"></script>

<div class="section-slideshow">
    <div class="container-full">
      <div class="slideshow">
         <div class="carousel" data-flickity='{"pageDots": false, "wrapAround": true, "imagesLoaded": true, "resize": true}'>

           <div class="carousel-cell portrait">
            <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/simply.jpg" alt="Simply Green">
              </div>
              <div class="caption">
                <span class="number">01</span>
              </div>
             </div>
           </div>

           <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                 <img src="https://manuelauer.at/wp-content/uploads/2019/05/pulled.jpg" alt="True Chicken">
              </div>
              <div class="caption">
                <span class="number">02</span>
              </div>
            </div>
           </div>

            <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/pc.jpg" alt="True Chicken">
              </div>
              <div class="caption">
                <span class="number">03</span>
              </div>
             </div>
           </div>

            <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/wings.jpg" alt="True Chicken">
              </div>
              <div class="caption">
                <span class="number">04</span>
              </div>
             </div>
           </div>

            <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/fab5.jpg" alt="FAB5 Stylingcrew">
              </div>
              <div class="caption">
                <span class="number">05</span>
              </div>
             </div>
           </div>

            <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/order.jpg" alt="True Chicken">
              </div>
              <div class="caption">
                <span class="number">06</span>
              </div>
             </div>
           </div>

            <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/ball.jpg" alt="HAK & HTL Traun">
              </div>
              <div class="caption">
                <span class="number">07</span>
              </div>
             </div>
           </div>

             <div class="carousel-cell landscape">
              <div class="content">
              <div class="image">
                <img src="https://manuelauer.at/wp-content/uploads/2019/05/opening.jpg" alt="True Chicken">
              </div>
              <div class="caption">
                <span class="number">08</span>
              </div>
             </div>
           </div>
        </div>
        <div class="credit">
          <p class="label">Titel</p>
          <p class="text">Grand Opening</p>
          <p class="label">Kunde</p>
          <p class="client">True Chicken</p>
        </div>
      </div>
    </div>
  </div>

.section-slideshow {
  background-image: url("http://manuelauer.at/wp-content/uploads/2019/05/topo-background-black-384f1c289a69325be12b9313d5175b617fbf8b0afddb5a5ce2da6813cf65fc35.jpg");
  background-size: 600px;
  height: 100%;
  padding: 0;
  position: fixed;
  width: 100%;
  left: 0;
  margin: 0;
}

.container-full {
  max-width: 100vw;
  padding: 0;
  margin: 0 auto;
  height: 100%;
}

.section-slideshow>.container {
  height: inherit;
}

.slideshow {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
}

.slideshow>.carousel {
  height: 270px;
  width: 100%;
  z-index: 1;
}

.flickity-enabled {
  position: relative;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.slideshow>.carousel .carousel-cell {
  cursor: default;
  height: 100%;
  padding: 0 1rem;
}

.slideshow>.carousel .carousel-cell>.content {
 height: 100%;
 position: relative;
}
.slideshow>.carousel .carousel-cell>.content>.image {
  height: 100%;
}

.slideshow>.carousel .carousel-cell>.content>.image>img {
  height: calc(100% - 42px);
  width: auto;
}

img {
  margin: 0;
}

.slideshow>.carousel .carousel-cell>.content>.caption {
  bottom: 0;
  margin: 0;
  position: absolute;
  width: 100%;
}

.caption>.number {
  flex: none;
  margin-right: 1rem;
}

.number {
  border-radius: 50%;
  border: 1px solid transparent;
  font-family: 'gt_america_monomedium';
  color: white;
  font-size: 12px;
  padding: .25rem .5rem;
  text-decoration: none;
  text-transform: uppercase;
}

.content:hover .number {
  border: 1px solid #fab315;
  transition: .5s;
  color: #fab315;
}

.content:hover {
  cursor: zoom-in;
}

.slideshow>.credit {
  bottom: 5%;
  position: absolute;
  width: 250px;
}

.credit {
  border-bottom: 1px solid white;
  border-left: 1px solid white;
  display: grid;
  font-family: 'gt_america_monomedium';
  grid-template-columns: auto 1fr;
}

.credit .label {
  padding-top: 6.75px;
  font-size: 10px;
  text-transform: uppercase;
}

.credit p {
  border-top: 1px solid white;
  border-right: 1px solid white;
  padding: .25rem .5rem;
  font-size: 12px;
  color: white;
  margin: 0;
}

p {
  margin: 0;
}

.flickity-prev-next-button {
  background-color: black !important;
  border-radius: 0 !important;
  height: 40px;
  width: 40px;
  top: calc(50% - 20px) !important;
}

.flickity-prev-next-button .arrow {
  fill: white;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.is-frontend .section_cp0p83hyp {
  height: 100vh;
}