Question

我有一个SVG图像，它只是没有显示我想要的方式。

这是我使用的css代码：

.container-background {
min-height: 25vh;
background-image: url("svg-image.svg");
background-size:     cover;                      
background-repeat:   no-repeat;
background-position: center center;  
border-bottom: 1px solid #e9e9e9;

我也试过对象适合包含/覆盖/其他所有选项，我只是不能让它显示正确。我需要它来覆盖整个容器

任何想法如何实现这一目标？我用完了选项

Answer 1

尝试设置background-size:contain，min-height:100vh和background-size:50%（如果您愿意，可以删除背景尺寸或调整百分比以使其适合您的设计）。

.container-background {
  min-height: 100vh;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg");  
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center center;
  background-size: 50%; // remove this or tweak to ajust the fill amount
  border-bottom: 1px solid #e9e9e9;
}

jsfiddle：https://jsfiddle.net/so099hnt/1/

Answer 2

你的CSS功能正常，封面占据了100％的空间，保持了图像的宽高比，所以任何多余的都被切断了。

背景包含

如果您想显示整个图像，那么您应该使用包含。

<强>小提琴 https://jsfiddle.net/7uca5x64/1/

使用内嵌图像拉伸背景

如果您希望它在不保持宽高比的情况下占据宽度和高度的100％，则将其作为内嵌图像添加，但这需要SVG以外的格式。然后，您可以使用绝对或固定定位使其看起来像背景图像。

img {
  height: 100%;
  width: 150%;
  position: absolute;
  left: -20%;
  z-index: -1;
}

<强>小提琴 https://jsfiddle.net/7uca5x64/5/

使用内联SVG拉伸背景

如果必须使用SVG，则必须将其内嵌到HTML中，然后才能通过CSS控制它。您还必须将preserveAspectRatio =“none”添加到SVG。

svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

<强>小提琴 https://jsfiddle.net/7uca5x64/6/

CSS SVG图像没有调整大小

2 个答案:

背景包含

使用内嵌图像拉伸背景

使用内联SVG拉伸背景