0
イメージを大きなイメージに配置しようとしています。これまでのところ、私はパディングの左とパディングトップに従ってこれをやっています。具体的には、次の方法を使用して、パディングを左とパディングトップにします。ブラウザのサイズに応じて要素を配置します。
function getOffsetRect(elem) {
// (1)
var box = elem.getBoundingClientRect()
var body = document.body
var docElem = document.documentElement
// (2)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
// (3)
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
// (4)
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
これは問題なく動作します。私はそれにdiv要素を配置するとき、私は、そのようなことは、正確な位置に配置されて
$("#testDiv").css({top: element.top, left: element.left, position: 'absolute'});
：
あなたは（あなたは2番目の引数がgetOffsetRectを呼び出す方法になりたいだろうが、その後、既存のイメージに返された値を適用）イベントリスナーを追加することによってこれを行うことができますuikitは応答性の高いフレームワークです。ページのサイズを変更すると、応答の度合いに応じてサイズの大きな画像がサイズ変更されます。しかし、私が大きな画像の上に置いた小さな画像は、奇妙な場所に移動します。もはや大きな画像の上に正しい位置にはありません。小さな画像を大きな画像に反応させる方法はありますか？ – unconditionalcoder
プロジェクト用のCSSはありますか？大きな画像をdivの内側に置き、divの幅をX％に設定し、画像の幅を100％に設定すると、画像のサイズを変更する必要があります。内側の画像を別のdivの中に入れ、その幅を任意の幅に設定し、幅100％の画像を作成すると、画像はそのdivでサイズ変更されます。最初のdivはページでサイズ変更され、2番目のdiv（最初のdivの内側にあるdiv）は最初のdivのサイズに基づいてサイズが変更されます。 –