背景SVG在Bootstrap列中不会缩放

Question

背景SVG在Bootstrap列中不会缩放

htmlcsstwitter-bootstrapsvgresponsive-design

3

我希望能够在嵌入到Bootstrap的<div class="col-xs-N">中，拉伸一个大的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>

任何想法都非常受欢迎。

- calmity

2个回答

1

只需在你的 CSS 中添加 min-height。

 .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>

- Shivkumar kondi

谢谢，这个也可以。然而正是像@learningloop建议的那样重新排列background: 'url(...);'和'background-size: cover;'最终解决了问题。 - calmity

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bprasanna · Accepted Answer

你需要将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;
  }

to:

.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;
      }

Example jsFiddle