我希望能够在 <div> 上拉伸(stretch)大型 SVG嵌入在 Bootstrap 的 <div class="col-xs-N"> 中.
代码是这样的:
<!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>
非常感谢任何想法。
最佳答案
你需要把你的 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
关于html - 背景 SVG 不会在 Bootstrap div 列中缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40900752/