Bootstrap卡片图像仅在平板电脑上消失

Question

我的网站在桌面和移动设备上工作得很好，但是当我在平板电脑/ ipad上查看我的网站时，我的卡片图像就会消失。我似乎无法弄清楚为什么我使用Bootstrap 4 / MDBootstrap，它自然响应。我以前从来没有这样过。我有一种感觉，这是一种简单的我想念但却找不到它。我也没有自定义CSS文件。我正在使用MDBoostrap提供的CSS。我只进行了一些小的更改，这些更改是在HTML文件中完成的。任何帮助，将不胜感激！

      

    <!--Grid column-->
    <div class="col-lg-4 col-xs-12">

      <!--Card-->
      <div class="card">

        <!--Card image-->
        <div class="view overlay"> 
          <img src="img/work1.jpg" class="img-fluid" alt="">
          <a href="http://www.eddiearkmunoz.com/" target="_blank"> 
            <div class="mask rgba-white-slight"></div>                
          </a> 
        </div>

        <!--Card content-->
        <div class="card-body text-center">
          <!--Title-->
          <h4 class="card-title">Mu&ntilde;oz Designs</h4>
          <!--Text-->
          <p class="card-text"><b>Languages:</b> HTML, CSS, Bootstrap, JavaScript, PHP</p>
          <a href="http://www.eddiearkmunoz.com/" target="_blank" class="btn btn" style="background-color: #1C2331;">View</a> 
        </div>

      </div>
      <!--/.Card--> 

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-xs-6">

      <!--Card-->
      <div class="card">

        <!--Card image-->
        <div class="view overlay"> 
          <img src="img/work2.jpg" class="img-fluid" alt=""> 
          <a href="http://www.ridewithamy.info/" target="_blank">                    
            <div class="mask rgba-white-slight"></div>                
          </a> 
        </div>

        <!--Card content-->
        <div class="card-body text-center">
          <!--Title-->
          <h4 class="card-title">Ride with Amy</h4>

          <!--Text-->
          <p class="card-text"><b>Languages:</b> HTML, CSS, MDBootstrap, Javascript</p> 
          <a href="http://www.ridewithamy.info/" target="_blank" class="btn btn" style="background-color: #1C2331;">View</a> 
        </div> 

      </div>
      <!--/.Card--> 

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-xs-6">

      <!--Card-->
      <div class="card">

        <!--Card image-->
        <div class="view overlay"> 
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid" alt=""> 
          <a href="#">                    
            <div class="mask rgba-white-slight"></div>                
          </a> 
        </div>

        <!--Card content-->
        <div class="card-body text-center">
          <!--Title-->
          <h4 class="card-title">WIP</h4>
          <!--Text-->
          <p class="card-text"> This WordPress website is being created for personal study. </p> 
          <a href="#" class="btn btn" style="background-color: #1C2331;">View</a> 
        </div> 

      </div>
      <!--/.Card--> 

    </div>
    <!--Grid column-->

  </div>
  <!--Grid row-->