そのため、ウィンドウのサイズが変更されると、div (およびそれに含まれるすべての要素) をスケーリングする必要があるプロジェクトに取り組んでいます。私の考えは、CSS3 スケール変換を使用することです。ただし、サイズを変更すると、div が配置した場所にとどまるのではなく、ウィンドウの中央に縮小されることがわかりました。
これは、(本当に)簡単な例であり、私が意味するときに説明したいと思います:http: //jsfiddle.net/hmY9q/3/ - 私が見たいのは、結果ボックスの両方の境界線と同じ青いボックスですそして赤い箱の底。
問題を修正する際に最初に考えたのは、div を配置したい位置と実際に表示される位置の差を計算し、変換行列を使用して同時にスケーリングと変換を行うことでした。私はこれを適切に機能させることができませんでしたが、非効率的で洗練されていないように思えます。
そのためのコードは次のとおりです(明らかにコードなしで質問を投稿することはできません):
var yShift = (container.height() * scale) - container.height();
var xShift = (container.width() * scale) - container.width();
container.css(browserID + "transform", "matrix("+ scale + ",0,0," + scale + "," + -xShift + "," + -yShift + ")");
注: 私は haxe でプログラミングし、js にコンパイルしているため、コードが少し異なります。「コンテナ」は JQuery オブジェクトであり、1 つとして扱うことができます。
では、これを簡単にする魔法の CSS や JavaScript を思いつく人はいるでしょうか? 私はクレイジーな薬を飲んでいて、本当にばかげたものを見逃していますか? ありがとう!