CSS中绝对定位元素的响应式转换

Question

我在图片的某些位置放置了绝对定位的div块。由于我想让我的图片具有响应性，因此我希望绝对块也具有响应性。这就是我遇到的问题：我可以使用CSS的缩放和平移属性手动调整大小和平移，但它不具有响应性。

*{margin: 0;padding: 0}
.relat{position: relative;}
.abs {position:absolute;}
.cube1 {background-color: red;border: 1px solid black}
.cube2 {background-color: blue;border: 1px solid black;}
.cube3 {background-color: purple;border: 1px solid black;}
.cube1O {background-color:red;}
.cube2O {background-color: blue;}
.cube3O {background-color: purple;}
.transform{transform-origin: top left;}
.modify{transform: scale(0.5);}
.modify2{transform: scale(0.5) translate(-100%, 0);}
.modify3{transform: scale(0.5) translate(0, -100%);}

<div class="relat">
    <div class="abs cube1O" style="top:0px;left:0px;width:200px;height:200px"></div>
    <div class="abs cube2O" style="top:0px;left:200px;width:200px;height:200px"></div>
    <div class="abs cube3O" style="top:200px;left:400px;width:200px;height:200px"></div>
    <div class="abs cube1 transform modify" style="top:0px;left:0px;width:200px;height:200px"></div>
    <div class="abs cube2 transform modify2" style="top:0px;left:200px;width:200px;height:200px"></div>
    <div class="abs cube3 transform modify3" style="top:200px;left:200px;width:200px;height:200px"></div>
</div>

三个大立方体表示在100%大小图像上的位置，三个较小的立方体（这里是50%）表示在50%大小图像上的位置。（但由于它是响应式的，变换可以是任何百分比）。

我无法从这些3个块的变换外观中（但实际上有很多个块），确定是否有唯一的css变换可应用于立方体。

我正在使用transform-origin: top left;使旋转点位于左上角。这是否重要？

问题出现在transform: scale(scaleXY) translate(transX, transY);

我无法想出对每个块使用唯一设置的变换。

我希望不要涉及javascript。有没有“简单”的方法来执行此任务？谢谢。

编辑：此外，我将top、left、width和height值放入内联样式中，因为在我的代码中，我从数据库获取它们：无法将它们放入CSS文件中。

编辑2：

查看与此问题相关的一些帖子，我发现也许我可以使用百分比值而不是固定像素值来解决我的问题。我会研究一下。

如果没有纯CSS解决方案，我也会对JavaScript解决方案感兴趣。

- Overdose

---

使用基于百分比的值会出现什么问题？您还可以使用CSS媒体查询来为不同的屏幕类型应用不同的CSS规则。 - Metabolic

我不确定你的意思。在这个“简单”的例子中，我有3个div要缩放，保持它们的相对位置。问题是我不能对每个div应用相同的变换。由于我希望它具有响应性，我想知道是否有一种唯一的公式（某种变换矩阵），可以让我调整大小而不失去关系（块B在块A右侧，块C在B的右下方）。我给出的代码只是一个“快照”。如果比例是30％，我希望保持相同的位置。这不是屏幕尺寸的问题。 - Overdose

很抱歉，我无法确定您的确切问题。您所提出的问题可能是由于您解决原始问题的方法不当所致。如果您能提供更好的细节信息，也许我们可以提供帮助。关于响应式CSS媒体查询，请在此处查看https://www.w3schools.com/css/css_rwd_mediaqueries.asp - Metabolic

CSS 可以动态添加到 CSS 类中，例如：<style> .className { height: <?php echo $height ?> } </style> - Metabolic

@Meta Pakistani：如果我的问题陈述不够清晰，我很抱歉。我认为我的问题标题本身已经很明确了。我再试一次：我能否拥有一个通用的scale(xy) translate(x, y)，适用于我可以使用绝对位置放置的每个块，从而允许容器进行响应式调整大小？类似于https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/。 - Overdose

非常感谢@Overdose的建议，它的效果和我想要的一样。非常感谢！ - Parth Jasani

Answer 1

尝试在覆盖层类中添加overflow:hidden;，这是你想要的吗？

- Luca Spezzano