代码之家 › 专栏 › 技术社区 › Blackbam

将背景图像(SVG)拉伸到100%宽度和100%高度?

stretch background-image svg css html

3

Blackbam · 技术社区 · 8 年前

background-size:cover; ,但 background-size:contain; background-size:100%; 应该这样做,但看看这个例子-它没有。

.container {
   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:300px;
   height:180px;
   background-color:#eef;
   border-bottom:1px solid #000;
}

#container1 {
  background-size:contain;
}

#container2 {
  background-size:cover;
}
#container3 {
  background-size:100%;
}

<div id="container1" class="container"></div>

<div id="container2" class="container"></div>

<div id="container3" class="container"></div>

我怎样才能达到预期的拉伸效果?

3 回复 | 直到 8 年前

1

4

Rmaxx 4 年前

选择的答案是正确的,但有点不完整:以下是为什么。。。

如果希望背景SVG图像拉伸并填充整个容器,请务必注意,SVG必须允许这种情况发生。在SVG中,确保在视口旁边添加了“PreserveSpectratio=“none”。

因此,请使用:

background-size: 100% 100%;

在SVG中,确保它看起来像这样:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 100" preserveAspectRatio="none">

2

3

myf 8 年前

使用 background-size: 100%; 实际上意味着 background-size: 100% auto; . 使用宽度和高度值: background-size: 100% 100%;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax

.container {
   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:300px;
   height:180px;
   background-color:#eef;
   border-bottom:1px solid #000;
}

#container1 {
  background-size:contain;
}

#container2 {
  background-size:cover;
}
#container3 {
  background-size: 100% 100%;
}

<div id="container1" class="container"></div>

<div id="container2" class="container"></div>

<div id="container3" class="container"></div>

3

0

abney317 8 年前

这应该有效:

background-size: 100% 100%;

.container {
   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:300px;
   height:180px;
   background-color:#eef;
   border-bottom:1px solid #000;
}

#container1 {
  background-size: 100% 100%;
}

<div id="container1" class="container"></div>