如何使2个并排图像自动适应我的移动屏幕的宽度和高度？

Question

我试图让两个图像（相同尺寸）并排放在屏幕上，即如果屏幕宽度是限制因素，则每个图像必须占据宽度的50％，如果高度是限制因素，它们必须显示在屏幕高度的100％。以下与我的手机纵向（宽度适合）完美配合，但当我翻转到横向时，宽度仍然完美，但图像比高度更长。

如何在宽度和高度上对其进行比例分析，以便两个图像始终并排显示，并且完全可见？

＆＃13;

＆＃13;

<div class="container-fluid">
  <div class="row">
    <img class="img-responsive col-xs-6" src="..." alt="card1" />
      <img class="img-responsive col-xs-6" src="..." alt="card2" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用包含以下代码的自定义样式表：

＆＃13;

＆＃13;

@media screen and (min-height: 321px /* or max-height: 321px */) {
  .img-responsive {
    width: 100%;
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    object-fit: cover;
  }
}

＆＃13;

＆＃13;

＆＃13;