Если вы ожидаете, что форма каким-то образом изменится, чтобы иметь ту же высоту изображения, этого не произойдет.
Причина, по которой изображение ведет себя отзывчиво, заключается в том, что оно имеет соотношение сторон. Это означает, что у него есть своя собственная высота и ширина. Здесь вы устанавливаете только ширину, и, поскольку соотношение сторон, высота изображения регулируется соответствующим образом.
Элементы формы имеют фиксированный размер по умолчанию. Они не должны масштабироваться как изображения.
Вместо этого вы можете установить ширину 100% для входных данных и позволить ширине определяться шириной родительского контейнера. Однако это никак не повлияет на высоту элементов формы.
CSS для этого выглядит следующим образом:
input[type="text"] {
width: 100%;
/*you also need to change box-sizing,
since the input itself already has a padding
and a border and would exceed the boundaries
of the parent container because of that:*/
box-sizing: border-box;
}
Обратите внимание, что я использовал [type="text"]. Этот селектор будет работать только в том случае, если вы установите текстовый ввод на своих входах так же, как это:
<input type="text" class="formtextarea" placeholder="Business Name">
Если вы хотите, чтобы ваш макет корректировался в соответствии с шириной или высотой экрана, я предлагаю вам иметьпосмотрите на медиа запросы в css.