背景 SVG 不会在 Bootstrap div 列中缩放
Posted
技术标签:
【中文标题】背景 SVG 不会在 Bootstrap div 列中缩放【英文标题】：Background SVG won’t scale in Bootstrap div column 【发布时间】：2017-04-15 12:10:43 【问题描述】：我希望能够在嵌入在 Bootstrap 的 <div class="col-xs-N"> 中的 <div> 上拉伸一个大型 SVG。
代码是这样的：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.my-img
background-size: cover;
padding-bottom: 100%;
background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
</style>
</head>
<body>
<div class="container">
<div class="col-xs-offset-5 col-xs-2">
<div class="my-img"> </div>
</div>
<div class="col-xs-5">
</div>
</div>
</body>
</html>
非常感谢任何想法。
【问题讨论】：
【参考方案1】：您需要将background-size: cover; 放在background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center; 之后。在您的情况下，background-size 在加载图像之前被调用，因此它没有生效。
变化：
.my-img
background-size: cover;
padding-bottom: 100%;
background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
到：
.my-img
padding-bottom: 100%;
background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
background-size: cover;
例如jsFiddle
【讨论】：
太棒了，谢谢。也刚刚意识到“大型 SVG”这个概念没有多大意义。 语句的顺序很重要。可以肯定的是，这是一种基本品质，但突然之间，我眼中的 CSS 变得更加复杂。 :)【参考方案2】：只需将 min-height 添加到您的 CSS。
.my-img
padding-bottom: 100%;
min-height:100vh; background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
background-size: cover;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="col-xs-offset-5 col-xs-2">
<div class="my-img"> </div>
</div>
<div class="col-xs-5">
</div>
</div>
</body>
</html>【讨论】：
谢谢，这个也可以。然而，它是背景的重新排序：'url(...);'和'背景尺寸：封面;'正如@learningloop 所建议的那样，最终节省了一天。以上是关于背景 SVG 不会在 Bootstrap div 列中缩放的主要内容，如果未能解决你的问题，请参考以下文章
更改 SVG 背景图像的颜色（Bootstrap 4 轮播）
如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标？