我想做一个旋转木马风格的小部件，这是建立与3个图像和两个按钮。 我的问题是，这整个过程需要响应迅速，并在保持图像之间关系的同时向上（向下）伸缩。

形状如下:

图像的像素大小都是预先知道的，并且可以预先知道所需的任何关系（例如，移动绿色和蓝色框所需的量，因为它们不是垂直居中的）。

我对HTML/CSS不是很有经验，我设法用FlexBox和翻译得到了这个形状，但我永远无法使它与页面的其余部分正确缩放。

我不太明白这在CSS中是否可能，因为它需要某种绝对的定位/翻译/等等，这破坏了它的盒子模型。

我想尝试的下一件事是使用画布并自己绘制图像，同时让画布的宽度随心所欲地伸展（最大值），而我在JS中控制高度，因为我知道小部件的宽高比。 不过，我更喜欢更简单的HTML/CSS解决方案。

我想我可以在没有画布的情况下做同样的事情--画布是一个由CSS控制宽度的容器，但我可以控制它的高度，图像/按钮可以完全放在画布中，但这也有点奇怪。

顺晟科技：

您的目标可以通过对不同CSS断点（例如，在https://getbootstrap.com/docs/5.0/layout/breakpoints/)上列出的图像使用基于百分比的宽度值（高度为自动或未设置）来实现。实际上，从美学的角度来看，我建议将按钮设置为像素值（同样，在断点处不同）。容器（如div元素）或body元素将是图像和按钮缩放到的父元素。

为了实现图像的重叠（以及下一段中提到的按钮的水平对齐），您需要为所有元素设置Z索引，这确实需要绝对或固定定位。如果元素的位置是绝对的或固定的，则可以使用top属性修改垂直位置。

给三个图像自动左/右页边距。将按钮设置为与绿色图像相同的Z索引，这样它们就会靠在绿色图像上。给L按钮一个自动的左页边距和0的右页边距。给R按钮的左页边距为0，右页边距为auto。

如您所愿，此解决方案不需要JS。