在Bootstrap中样式化文档预览

Question

我目前正在使用Angular 7 / Bootstrap 4 / HTML / CSS编写注册表。

我的注册表格要求用户输入Information A和Information B，它们只能打印在他们有权访问的文档上。

由于我必须对所有设备（无论是超宽屏显示器还是智能手机）进行响应，因此我希望预览跳到表单下方。另外，我希望预览卡的高度始终与表格卡的高度相同。使用Bootstraps 12 column methods，我知道了。

但是主要的问题是文档预览的样式。预览只是一个图像，它会被替换掉，具体取决于用户当前聚焦的输入。 Information A打印在文档的顶部，Information B打印在文档的底部。现在，在更宽的屏幕上，显示卡也越来越宽。我必须缩放图像或裁剪图像。都不是真正的选择，因为缩放会使其变小以使其易于阅读，并且裁剪会切断Information B。

此外，还需要涵盖不同浏览器中的不同行为。

当前预览卡代码：

<div class="col-md-5 col-lg-5 col-xl-4 card m-lg-3">
  <h5 class="text-center font-weight-normal py-4 px-4 px-sm-5 m-0 header card-header">Preview</h5>
  <div class="px-4 px-sm-5 pt-4 pb-5 pb-sm-5">
    <img [src]="currentImage"
         class="img-fluid" style="max-height: 525px; min-width: 100%;
         object-fit: cover; object-position: top"/>
  </div>
</div>

参考图片：

问题： 使用Bootstrap4和/或CSS / HTML / Angular 7在1:1.4 (DIN A4)中设置预览样式的好方法是什么