背景ブートストラップのdiv列にSVGがスケーリングされない

ブートストラップの<div class="col-xs-N">に埋め込まれた<div>に大きなSVGをストレッチすることができます。背景ブートストラップの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>

任意のアイデアは、非常に高く評価：

コードは、これです。

出典

2016-12-01 calmity

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

出典

2016-12-01 05:09:38 learningloop

ブリリアント、単に概念「大SVG」はそのあまり意味がないことを実現するために来たyou.Alsoに感謝。 – calmity

ステートメントの順序は重要です。基本的な品質は確かですが、私の目には突然のCSSがすべて複雑になりました。 :) – calmity

ちょうどあなたの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>

出典

2016-12-01 05:40:49

ありがとう、これも動作します。しかし、それは背景の並べ替えです： 'url（...）;' and 'background-size：cover;'最終的にその日を節約する@learningloopによって提案されるように。 – calmity

背景ブートストラップのdiv列にSVGがスケーリングされない

答えて

関連する問題