Mobile 将div中的所有内容缩放为一个元素

我有两张图片放在一个div中，上面一张，下面有一个标题。我希望随着浏览器窗口的缩小，所有这些元素都能按比例一起缩放

目前，这两幅图像的位置发生了变化，在手机上看起来也不一样

.highlightimg{
最大宽度：700px；
高度：自动；
宽度：100%；
显示：块；
位置：相对位置；
z指数：1；
垫顶：10vh；
右边距：0；
}
.展示{
最大宽度：750px；
保证金：自动；
位置：相对位置；
边际上限：8vh；
边缘底部：8vh；
}
.标志{
左：0；
最大宽度：400px；
宽度：100%；
高度：自动；
位置：绝对位置；
z指数：3；
左：0px；
}
.标题{
边缘顶部：10px；
页边距底部：0；
填充：0；
文本对齐：右对齐；
}

此处为标题文本

徽标相对于其下方图像的位置肯定会移动。原因之一是您对某些属性使用了

vh

单元，包括

.highlightimg

的

填充顶部。桌面和移动设备中的10vh是不同的（它们都有不同的视口大小）。如果希望两个元素保持不变，请通过至少设置常量
padding top
、
margin top
、或
top
属性（包括左padding和margin），将它们锚定到左侧和顶部

可能会添加
top:18vh
到
。logo
可能会有所帮助。使用
top:10vh
而不是18vh，同时从
中删除
页边距顶部：8vh
。showcase
也有帮助。这是为了确保由其
padding top
属性提供的
.highlightimg
的顶部偏移量与
.logo
的顶部偏移量成比例缩放。这些解决方案假设页面中没有其他元素肯定会改变这些元素的位置，尤其是没有绝对位置的元素

位置：绝对位置将元素锚定到屏幕上。而
位置：相对保持元素原始渲染位置，并相对于其原始渲染位置移动元素本身。两者对元素在屏幕上的渲染位置都有根本不同的影响。如果希望两个元素完全位于同一位置，请对这两个元素使用绝对值，并使用相同的
top
和
left
属性

关键是，不要依赖CSS属性来确定对象的确切位置。如果你想要像你在Photoshop类比中描述的那样的行为，你可以使用
canvas
找到一种方法，谢谢你的回复！在Photoshop中将这两幅图像合并成一幅图像会更好吗？这可能是确保布局对所有设备通用的更好方法。我对画布没有太多经验。@charleshawk如果您希望两个图像始终保持在一起，并且始终具有相同的行为和相对位置（例如，您永远不希望在某些事件中隐藏或移动一个图像），那么可以。这是不相关的，但它也会减少浏览器的负载。当然，加载一个图像要比加载两个图像快，明白了。谢谢你的帮助！