css レスポンシブ、背景画像とコンテンツをアスペクト比を保持したまま画面幅に追従する

font-size: 16vw;
width: 50vw;
height: 100vh;

% の代わりに vh,vw を使うと、テキストサイズなども追従するので便利

使い方のコツ

width には vw
height には vh
ということではない

vw 画面幅の何%か?
vh 画面高さの何%か?
ということなので

width にも height にも margin にも vh で指定すれば、アスペクト比(縦横比)を保持できる