divの％を表面積でカバーする画像のサイズ変更

Question

私はIonicアプリで作業しています。私は2列の四角形のレイアウトを持っています。例として100x100としましょう。私はそれらの四角形の中でイメージを再スケーリングして（水平および垂直に）センタリングしたいと思います。

ただし、画像を挿入する画像の縦横比は同じではありません。私は、寸法に関係なく、同じ表面積をカバーするように画像のサイズを変更したいと思います。

また、たとえば、各画像がグリッドの四角形の25％を覆うようにしたいとします。私が1000x1000イメージを持っているならば、正方形内の面積の25％をカバーするために50x50にリサイズされます。 500x250の画像がある場合は、70x35にサイズが変更されます。

私は数学的にこれを行う方法を理解しています：image dimension * sqrt（（画像幅x画像の高さ）/（0.25）（div幅x divの高さ））。しかし、Angularのコードでは、私は苦労しています。

アドバイスはありますか？

Answer 1

可能であれば、私はCSSを使用しようとします。ブラウザでこれをレンダリングするのがはるかに軽くなり、実装するのがはるかに簡単になります。

これを行うには、テンプレートにボックスを作成すると、各ボックスに画像が背景として表示されます。ボックスのng-style属性を使用して設定することができます。あなたのCSSで

あなたはこのような何かを行うことができます：

.image-box { 
    width: 50px; 
    height: 50px; 
    background-size: cover; 
}