В настоящее время я работаю над формой регистрации, используя 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>
Эталонное изображение:
Вопрос:
Что было бы хорошим способом стилизовать предварительный просмотр в 1:1.4 (DIN A4), используя Bootstrap4 и / или CSS / HTML / Angular 7