javascript - css max-width, max-height 100% の Javascript アナログ

Question

画像の幅/高さを設定するには、JavaScript アナログ (アルゴリズム) が必要です。これは、画像のサイズ変更のために max-width と max-height を 100% 変更すると効果があります。(max-width と max-height css 属性を使用せず、幅と高さのみ)

Answer 1

これが最善の解決策かどうかはわかりませんが、このようなことを行う 1 つの方法は、最大幅と最大高さを決定しようとしている要素を複製することです。次に、それを目に見えないようにレンダリングし、レンダリング後に項目の JavaScript プロパティを使用して値を決定します。これにより、ブラウザーが値を計算できるようになります。

要素を position: absolute および visibility: hidden としてレンダリングする場合、ユーザーには表示されずにページの一部としてレンダリングされた場合と同じ属性を持つ必要があります。

レンダリングと計算が完了したら、要素を削除できます。