Question

我在div中彼此放置了两个图像，并在其下方添加了标题。我希望所有这些元素都可以随着浏览器窗口的缩小而按比例缩放并一起缩放。

当前，两个图像的位置发生了偏移，并且在移动设备上看起来并不相同。

.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单位用于某些属性，包括padding-top的{{1}}。桌面版和移动版中的10vh是不同的（它们都有不同的视口大小）。如果要使两个元素保持相同，请通过至少设置常量.highlightimg，padding-top或margin-top属性（包括左填充和保证金）。

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

.logo将元素固定在屏幕上。 position: absolute;保留元素的原始渲染位置，并将元素本身相对于其原始渲染位置移动。两者对元素在屏幕上的呈现位置都有根本不同的影响。如果希望两个元素都完全位于同一位置，请对两个元素都使用绝对值，并使用相同的position: relative;和top属性。

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

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

1 个答案: