html - CSS - 将图像相互关联，同时还支持缩放

Question

我想制作一个带有 3 个图像和两个按钮的轮播式小部件。我的问题是，整个事情需要响应并扩大（最大）和缩小，同时保持图像之间的关系。

形状如下：

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

我对 HTML/CSS 不是很有经验，我设法通过 flexbox 和翻译获得了这种形状，但我永远无法让它与页面的其余部分正确缩放。

我不太明白这是否可以用 CSS 实现，因为它需要某种绝对定位/翻译等，这会破坏它的盒子模型。

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

我想我可以在没有画布的情况下做同样的事情——一个由 CSS 控制宽度的容器，但我控制它的高度，图像/按钮都可以绝对定位在其中，但这也有点奇怪。

标签： htmlcsscarousel

Answer 1

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

要完成图像的重叠（以及下一段中提到的按钮的水平对齐），您需要为所有元素设置 z-index，这确实需要绝对或固定定位。鉴于您的元素将是绝对位置或固定位置，您可以使用 top 属性修改垂直定位。

给三个图像自动左/右页边距。将按钮设置为与绿色图像相同的 z-index，以便它们靠在绿色图像上。将 L 按钮的左边距设为 auto，右边距设为 0。将 R 按钮的左边距设为 0，右边距设为 auto。

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