如何制作具有縱橫比的回應式SVG/CSS背景-有解無憂

我的標題位置是relative，我absolute在徽標旁邊有一個帶有傾斜邊緣（一側梯形）的SVG 影像。標志區域應該是固定的450px，svg 影像應該在回應寬度上拉伸（不改變 SVG 的角度。）

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

如何制作具有縱橫比的回應式 SVG/CSS 背景

<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 制作它？

uj5u.com熱心網友回復：

這里海軍藍 SVG 的寬度為 5000px。它位于 100px 右側，標題的溢位被隱藏。因此，部分/大部分 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/384999.html

標籤：css svg 反应灵敏纵横比

上一篇：折疊側邊欄時SVG圖示消失

下一篇：如何在閃亮的應用程式中平移和縮放svg檔案