ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0.7にして黒い部分は透かしてあります。
ですが、ブラウザのサイズを弄って、例えば幅が短くなると当然画像も横に潰されて、以下のようになってしまいます。
ブラウザのサイズやデバイスのアスペクト比に左右されずに顔フレームを画面に表示する方法をどなたかご存じないですか?フレームの顔部分以外の画面はすべて透かしをいれた黒にせなばならないの単に用意した画像のwidthとheightをcssでいじるだけで上手くいきませんでした。
説明があまり上手くなく恐縮ですがよろしくお願いします。