像一个元素一样缩放 div 中的所有内容

Question

我在 div 中将两张图片叠放在一起，下面有说明文字。我希望所有这些元素都能随着浏览器 window 缩小而按比例一起缩放。

目前，两张图片的位置发生了偏移，在移动设备上看起来不一样。

.highlightimg {
max-width: 700px;
height: auto;
width: 100%;
display: block;
position: relative;
z-index: 1;
padding-top: 10vh;
margin-right: 0;
}
.showcase {
max-width: 750px;
margin:auto;
position: relative;
margin-top: 8vh;
margin-bottom: 8vh;
}
.logo {
left:0;
max-width: 400px;
width: 100%;
height: auto;
position: absolute;
z-index: 3;
left: 0px;
}
.caption {
margin-top: 10px;
margin-bottom: 0;
padding: 0;
text-align: right;
}

<div class="showcase">
    <img src="logo.png" class="logo">
    <img src="highlight.jpg" class="highlightimg">
    <p class="caption">Caption text here.</p>
</div>

我尝试接收的产品的最佳类比是在 Photoshop 中对多个图层进行分组，这样您就可以将所有图层一起缩放，就好像它是一个单一的图像一样。我是 HTML/CSS 的新手，所以我希望这是有道理的并且不要经常被问到。感谢您的帮助。

Answer 1

徽标相对于其下方图像的位置肯定会发生偏移。原因之一是您对某些属性使用 vh 单位，包括 .highlightimg 的 padding-top。桌面和移动设备中的 10vh 是不同的（它们都有不同的视口大小）。如果您希望两个元素保持不变，通过至少设置常量 padding-top、margin-top 或 top 属性（包括左侧填充和保证金）。

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

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

要点是，不要依赖 CSS 属性来确定对象的确切位置。如果您想要像您在 Photoshop 类比中描述的那样的行为，您可以使用 canvas.

找到一种方法

像一个元素一样缩放 div 中的所有内容

Scaling all content in a div as if one element

mobile

scaling

responsive