如何在隐藏溢出的div中集中内容

Question

我的代码大师们。

我想让我的头球转向中心。我想要剪辑溢出：隐藏，但当我调整屏幕的纵向它剪辑图像的右侧，当它的风景它剪辑底部。我想让它同样夹住顶部、右侧、底部和左侧。

真实的图像要复杂得多，只是用这个作为例子。

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

我耍了个笔头把戏

提前感谢！

      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

换衣服。header{}和thesvg{}样式，并使它们如下所示-

css prettyprint-override">body{
  margin: 0;
  padding: 0;
}
.header{
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  background-color: black;
}
.theSVG{
   max-width: 100vmax;
   max-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 2

备选案文1：

您可以尝试“对象拟合：覆盖”属性。不知道它是否有您需要的浏览器支持。

Q-图像元素是否有与背景尺寸相同的尺寸：覆盖和包含？

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

备选案文2：

使用翻译。

Q-在隐藏溢出的较小div中居中一个未知大小的大图像

Answer 3

如果您将SVG存储在文件夹中，然后将其设置为标题的背景图像，会解决您的问题吗？然后，您可以设置背景大小为封面，背景位置为中心。这将在所有方面平等地裁减它。

类似的东西：

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