Question

我的代码大师。

我试图让我的标题转向中心。我希望带有溢出的剪辑：隐藏，但是当我将屏幕调整为纵向时，它会剪切图像的右侧，当它的风景时它会剪切到底部。我希望它能同样地夹在顶部，右侧，底部和左侧。

真实的图像更复杂，只是以此为例。

像transform-origin这样的东西：中心会非常好看，但在这种情况下它并不起作用。

我画了一支笔Header Trick

提前致谢！

＆＃13;

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

＆＃13;

     <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>

＆＃13;

Answer 1

更改.header {}和thesvg {}样式，并按如下所示进行操作 -

＆＃13;

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

＆＃13;

<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>

＆＃13;

它会响应所有尺寸的浏览器。

Answer 2

如果您将SVG存储在一个文件夹中，然后将其设置为标题的背景图像，它会解决您的问题吗？然后，您可以将背景大小设置为覆盖，将背景位置设置为居中。这样可以在各方面实现同等目标。

类似的东西：

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

Answer 3

备选方案1：

您可以尝试使用object-fit：cover属性。 Dunno，如果它有你需要的浏览器支持。

问 - Is there an equivalent to background-size: cover and contain for image elements?

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

备选方案2：

使用翻译。

问 - Center a large image of unknown size inside a smaller div with overflow hidden

如何将内容置于隐藏溢出的div中

3 个答案: