如何实现两张图片的合并并确保其在不同页面大小下都能完美适配？

发布日期： 2024-11-07 阅读量： 作者： 网络

如何将两张图片合并并适配不同页面大小？

问题描述：

想要合并两张图片，并使其在所有大小的页面中保持适应性。使用绝对定位实现后发现，页面大小改变后图片位置会出现偏移。

解决方案：

为了解决这个问题，可以使用动态单位配合响应式布局。

动态单位

vw和rem等动态单位可以根据设备可视宽度或页面根元素的字体大小自动调整尺寸。

rem方式

使用JavaScript动态计算根元素字体大小：

function refreshRem(){
    const whdef = 100 / 750
    const bodyWidth = document.body.clientWidth
    const rem = whdef * bodyWidth
    document.getElementsByTagName('html')['0'].style.fontSize = `${rem}px`
}

# css # 绝对定位

上一篇: 苹果为什么喜欢使用虚拟机Docker

下一篇: docker可以做网站吗

如何实现两张图片的合并并确保其在不同页面大小下都能完美适配？

随便看看