0

ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
画像の説明をここに入力

このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0.7にして黒い部分は透かしてあります。

画像の説明をここに入力

ですが、ブラウザのサイズを弄って、例えば幅が短くなると当然画像も横に潰されて、以下のようになってしまいます。

画像の説明をここに入力

ブラウザのサイズやデバイスのアスペクト比に左右されずに顔フレームを画面に表示する方法をどなたかご存じないですか?フレームの顔部分以外の画面はすべて透かしをいれた黒にせなばならないの単に用意した画像のwidthとheightをcssでいじるだけで上手くいきませんでした。

説明があまり上手くなく恐縮ですがよろしくお願いします。

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。