javascript - 你如何在 overflow hidden 的div中居中内容

Question

我的代码大师。

我试图让我的头球转向中心。我想要溢出的剪裁:隐藏但是当我将屏幕调整为纵向时，它会剪裁图像的右侧，而当它是横向时，它会剪裁底部。我希望它同样地夹住顶部、右侧、底部和左侧。

真实图像要复杂得多，仅以此为例。

像 transform-origin: center 这样的东西会非常好，但在这种情况下不起作用。

我做了一支笔 Header Trick

提前致谢!

      body{
       margin: 0;
       padding: 0;
      }
      .header{
       width: 100%;
       height: 90vh;
       overflow: hidden;
       background-color: black;
      }
      .theSVG{
       width: 100vmax;
       height: 100vmax;
      }

     <div class="header">
      <svg viewBox="0 0 1000 1000" class="theSVG">
       <rect width="1000" height="1000" style="fill:rgb(0,0,255);stroke-        width:3;stroke:rgb(0,0,0)" />
       <rect width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <rect y="150" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <rect y="750" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <rect y="900" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <circle cx="500" cy="500" r="500" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
     </div>

Answer 1

如果将 SVG 存储在文件夹中，然后将其设置为页眉的背景图像，是否可以解决您的问题？然后，您可以将背景大小设置为覆盖，将背景位置设置为居中。这会在所有方面均等地裁剪它。

类似于:

.header{
    width: 100%;
    height: 90vh;
    overflow: hidden;
    background-image: url("assets/img/header-bg.svg");
    background-size: cover;
    background-position: center;
}