如何使用 css 使橫幅內的背景響應任何尺寸的屏幕？

Question

我在我的 css 文件中添加了一個 svg 作為橫幅組件的背景，但是當我將網頁調整為更大或更小時，圖像無法正確顯示。

這是我的代碼：

 .banner {
    background: url("../../assets/images/auth/plantATree.svg") center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    @media screen and (max-width: 752px ) {
      display: none;
    }
  }

我想讓我添加 svg 的背景完全顯示，無論瀏覽器的大小如何。

Answer 1

嘗試將此添加到 html 的頭部/頂部部分：

<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">