css - プレビューを作成するためのCSS変換スケール

Question

200x200のボックスに収まるように、コンテンツを含むdivをスケーリングしようとしています。基本的には、小さいdivに内容を表示して、大きいdivの「プレビュー」を作成したいと思います。

私はそれを40％縮小しています。問題は、40％縮小して、重なる200x200ボックスに配置することです。特定のサイズに縮小するためにパーセントで縮小する代わりに言う方法はありますか？たとえば、200x200に縮小できますか？

幅と高さが異なるいくつかのdivに対してこれを実行し、それらすべてを200x200pxのボックスに配置したいと思います。オーバーフローを使用したくない：非表示またはスクロール。

Answer 1

javascriptでこれを行う必要があると思います。画像を含むdivのすべてのコンテンツが読み込まれ、最終的なサイズに達するまで待機します。次に、jqueryまたはby getBoundingClientRect（css-transformsを使用している場合は、このメソッドが使用可能である必要があります）を使用して幅と高さを取得し、スケール係数を計算する必要があります。係数を計算するためのdivの高さ。つまり、divのアスペクト比と、それに収まる必要のあるサイズに注意する必要があります。最後に、javascriptを介してスタイルに値を設定できます。