如何制作具有纵横比的响应式 SVG/CSS 背景答案

【问题标题】：How to make responsive SVG/CSS background with aspect ratio如何制作具有纵横比的响应式 SVG/CSS 背景
【发布时间】：2022-01-18 22:09:54
【问题描述】：

我的标题位置是relative，我有一个absolute SVG 图像，在徽标旁边带有倾斜边缘（一侧梯形）。徽标区域应固定为450px，并且 svg 图像应以响应宽度拉伸（不改变 SVG 的角度）。

这是我正在寻找的概念：（灰色部分是我的 SVG）

<html lang="fa" dir="rtl">
<body>
<header>
  <svg viewBox="0 0 2000 100" height="100">
    <polygon points="0,0 2000,0 1950,100 0,100 z" fill="navy" />
  </svg>
  <div class="container">
    <div class="logo-area">
      <img scr="logo.png" class="logo"/>
    </div>
    <nav>
      <ul>
        <li>...</li>
        <li>...</li>
      </ul>
    </nav>
  </div>
</header>
</body>
</html>

header{
  position: relative;
}

header svg{
  position: absolute;
  left: 0;
  top: 0;
}

header .logo-area{
  width: 450px;
}

header .logo{
  text-align: right;
}

@media (min-width: 1024px)
.container {
    max-width: 1024px;
}

@media (min-width: 1366px)
.container {
    max-width: 1366px;
}

.container{
  margin-right: auto;
  margin-left: auto;
}

header .container nav{
  text-align: left;
  float: left;
  direction: ltr
}

如何使用 CSS 实现？

【问题讨论】：

可能你需要使用preserveAspectRatio="xMaxYMid slice"。如果这对您没有帮助，请考虑使用更多详细信息编辑您的问题。代码会很好。
那么，SVG 是否应该随宽度缩放（角度除外...）？还是 SVG 左侧或右侧消失的“滑动门”效果？
@chrwahl 是的，它是一个静态 SVG 背景，我只想缩放看起来像网格 css。没有任何滑动或类似的东西。
@enxaneta 我更新了图片并插入了代码。

标签： css svg responsive aspect-ratio

【解决方案1】：

这里的深蓝色 SVG 的宽度为 5000 像素。它位于右侧 100 像素处，并且标题的溢出被隐藏。因此，部分/大部分 SVG 隐藏在左侧。徽标图像也绝对位于右侧。

（图片也是 SVG，但在 <img> 中）

header {
  position: relative;
  height: 100px;
  overflow: hidden;
}

header svg {
  position: absolute;
  right: 100px;
}

header img {
  position: absolute;
  right: 0;
}

header nav {
  position: relative;
  color: white;
}

@media (min-width: 1024px) {
  header {
    max-width: 1024px;
  }
}

@media (min-width: 1366px) {
  header {
    max-width: 1366px;
  }
}

<header>
  <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdHRlcm4gaWQ9InAxIiB2aWV3Qm94PSIwIDAgMTAgMTAiIHdpZHRoPSIxJSIgaGVpZ2h0PSIzJSI+CjxjaXJjbGUgcj0iNSIgY3g9IjUiIGN5PSI1IiBmaWxsPSJuYXZ5Ii8+CjwvcGF0dGVybj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjcDEpIi8+Cjwvc3ZnPg=="
    alt="logo" width="300" height="100" />
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 100" height="100">
    <polygon points="0,0 5000,0 4950,100 0,100 z" fill="navy" />
  </svg>
  <nav>
    <ul>
      <li>Menu</li>
      <li>Menu</li>
    </ul>
  </nav>
</header>

【讨论】：

谢谢，很好。但是大于 2000px 的屏幕呢？我们可以将svg宽度设置为最终吗？还是可以从svg的左侧重复？
想将内容放入.container。我更新了图像并插入了代码。
@FredII 我更新了我的答案以适合您的问题和代码。现在 SVG 的宽度为 5000 像素——它可以根据需要进行扩展。关于.container。在我的示例中，我认为不需要它。我们有徽标、SVG 和 <nav>，然后媒体查询控制的是 <header> 的宽度。
谢谢，但我有一个问题，我在 html 标签中使用了 rtl 元数据。当我将margin: 0 auto 应用到我的header 时，它的左侧有空白区域（在 +1366px 屏幕上）并且不会填满屏幕。当我设置 overflow: visible 时，它会将 y-scroll 附加到屏幕上。这是我的代码，你可以看到：jsfiddle.net/Gamecock/cdzjx2qp/18
我认为它看起来不错。希望您在任何宽度的左侧和右侧都应该有相等的空间。如果您希望标题转到边缘，您可以添加body {margin:0}。但无论如何：您可能在页面上有更多内容 - 让父元素或主体控制页面的宽度，然后标题与其余内容一起只是一个子元素。使用弹性框或网格布局来控制页面的整体布局。