Question

我正试图将图像放在更大的图像上。到目前为止，我根据填充左边和填充顶部这样做。更具体地说，我使用以下方法来填充左边和填充顶部：

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'});

它位于确切的位置。我的问题是，当我使用更大的显示器或调整窗口大小时，我将定位较小图像的较大图像变得更小或更大，因此，较小图像应放置的原始填充顶部和填充底部变为误导。如何调整不同显示器尺寸/窗口大小调整的位置以使其位于所属的位置？

Answer 1

使用CSS媒体查询最容易做到这一点。 W3学校有一个很好的页面，所以你可以很容易地掌握它们。我建议检查它们，响应式设计将变得轻而易举。

Answer 2

在调整窗口大小时，您需要再次调用此方法（然后将新值应用于顶级图像的位置）。

您可以通过添加事件侦听器来执行此操作（尽管您希望第二个参数是调用getOffsetRect的方法，然后将返回的值应用于现有图像）：

window.addEventListener('resize', getOffsetRect(elem));

根据浏览器大小定位元素

2 个答案: