javascript - 根据背景大小拉伸(stretch)容器高度

Question

我知道有类似的问题，但这略有不同。只需阅读说明)

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

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

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

只用css可以实现吗？如果没有，那我怎么用js做呢？我无法更改现有的 html。

Answer 1

您可以为 SVG 背景设置最小宽度，以确保它不会变得太小以至于图片被 chop 。至于保持比例的框，您可以使用宽度和高度的百分比并将它们设置为您想要的任何值，例如，container2 的宽度是 container 宽度的 70%，SVG 背景是 90% container2 的宽度。