如何在手机上显示引导4卡上的图像？

Question

我有自举4格，每列有两个相等的列，有一张卡片，在桌面上并排显示卡片顶部的两张图片。在较小的设备上，网格变为单列（col-lg-6 col-sm-12），在这种情况下，如果设备宽度太小，则两个图像自动堆叠在彼此之上。问题是，当它们堆叠在一起时，图像会向左对齐，但我希望它们在这个场景中居中。怎么做？

另一个更好的选择是自动缩放图像以获取卡的整个宽度，以防它们堆叠在卡中的小型设备的顶部。怎么做这种方法？我在img元素上尝试过img-fluid类但不起作用。

以下是代码：

    <div class="container">

  <!--Grid row-->
    <div class="row">

     <!--Grid column-->
  <div class="col-lg-6 col-sm-12 ">

    <!--Card-->
    <div class="card mb-4">  
    <!--Card image-->
        <div class="">
    <span class="">
      <img src="DSC_0043.JPG" alt="" class=" rounded mb-1 img-fluid">
    </span>
    <span class="">
      <img src="DSC_0042.JPG" alt="" class=" rounded mb-1 img-fluid">
    </span>
    </div> 
    <!--/ Card image-->

    <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h5 class="card-title">Lorum Ipsum</h5>
    <div class="card-text">
      <div>HLorum Ipsum .. lorum ipsum </div>

    </div>

    <a href="#" class="btn btn-default">View More Details</a>

    </div>

    <div class="card-footer">
<span class="" >Lorum ipsum </span> 
    </div>



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

  </div>
  <div class="col-lg-6 col-sm-12 d-flex22">

      <!--Card-->
    <div class="card mb-4">  
    <!--Card image-->
        <div class="">
    <span class="">
      <img src="DSC_0043.JPG" alt="" class=" rounded mb-1 img-fluid">
    </span>
    <span class="">
      <img src="DSC_0042.JPG" alt="" class=" rounded mb-1 img-fluid">
    </span>
    </div> 
    <!--/ Card image-->

    <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h5 class="card-title">Lorum Ipsum</h5>
    <div class="card-text">
      <div>HLorum Ipsum .. lorum ipsum </div>

    </div>

    <a href="#" class="btn btn-default">View More Details</a>

    </div>

    <div class="card-footer">
<span class="" >Lorum ipsum </span> 
    </div>



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

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

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

</div>