拉伸容器高度取决于背景大小

Question

我知道有类似的问题，但这有点不同。刚阅读说明）

我有一个根据屏幕尺寸拉伸的主容器（红色）。在它的里面有第二个容器（蓝色），顶部有固定高度的div和背景图片。

起初我尝试在背景中使用background: cover作为图片。但在某些尺寸下，不能看到背景的不同部分，这是不可能的。

所以我想要实现的是svg背景根据蓝色容器的宽度拉伸并保持它的比例。此外，我希望第二个容器根据它的背景改变高度，所以整个svg图片将始终可见。

是否有可能只用css实现？如果没有，那么我怎样才能使用js？我不能对现有的html进行更改。

Answer 1

您可以将最小宽度设置为SVG背景，以确保它不会变得太小以至于图像被切断。对于保持其比率的方框，您可以使用宽度和高度的百分比并将它们设置为您想要的任何值，例如，容器2的宽度是容器宽度的70％，SVG背景是90％的container2的宽度。