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

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

stretch background-image svg css html

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

Rmaxx 5 年前

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

如果希望背景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">

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>

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>

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

1 年前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

1 年前

man · CSS-如何具有或模拟仅适用于内部的半径边框

1 年前

McLaren · 增加笔划宽度属性后,图标将被裁剪

1 年前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

1 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

1 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

1 年前

MarcelausZell · 调整svg的大小会导致额外的高度

1 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

1 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

2 年前