26

我正在制作一个仅显示 SVG 图像的页面，以下是要求：

  • 矢量应该占据整个窗口
  • 矢量应保持其纵横比（在 SVG 文件本身中定义）
  • 矢量应该裁剪/剪辑以防止歪斜

CSS...

body {
  background: url(/path/to/image.svg);
  background-size: cover;
}

...几乎可以完美地工作，除了当浏览器窗口变得太窄时，它会平铺而不是裁剪/剪裁。

下面是一些截图（请忽略dabblet留下的神器）： 接近纵横比的窗口

这里窗口接近原始图像的纵横比 窗户

这里窗口比纵横比“短”，并且图像正在裁剪（根据需要）。 在此处输入图像描述

这里的窗口比纵横比“更窄”，但不是裁剪，图像是平铺的（不需要的）。

以下是我的一些想法...

  • 我可以以某种方式更改 SVG 图像以防止这种情况发生吗？
  • 我可以标记/样式页面以达到预期的结果吗？
  • 我更愿意保留在 HTML/CSS 领域，但如果需要 Javascript，那么就这样吧。

这是我正在使用的 dabblet... http://dabblet.com/gist/6033198

4

3 回答 3

28

经过反复试验，这就是我发现的。

添加（到原始 CSS）：

html {
  height: 100%
}

提供了我在原始规范中寻找的东西。

此外，如果我希望图像在裁剪时居中，我可以使用：

html { 
  background: url(path/to/image.jpg) no-repeat center center fixed; 
  background-size: cover;
}

最后，如果我希望它居中，请始终保持纵横比，但不要裁剪（即，一些空白是可以的），那么我可以这样做：

body {
  background: url(/path/to/image.svg) no-repeat center center fixed;
  background-size: contain;
}
于 2013-07-20T00:07:32.593 回答
3

对我来说，我设置了所有其他属性，除了background-attachment:fixed. 多年来，我在自己的网站上遇到了同样的问题，这是我遇到过的最难以捉摸和最令人愤怒的错误之一，但将其添加到html元素中似乎终于为我解决了这个问题。

于 2020-08-29T18:10:26.967 回答
-2

这个css正在工作。谢谢

"background-size: contain;"

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}

<div class="cover">&nbsp;</div>
于 2013-12-17T07:04:56.143 回答