自舉圖形：100％寬度

在我的web應用程序中，我有一個網格中的div中包含的圖形。自舉圖形：100％寬度

我希望圖形是全寬和比例高度（要正確顯示）。

我該怎麼辦？

Plunker是：http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview

HTML是：

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red"> 
     <span class="glyphicon glyphicon-star"></span> 
     </div> 
    </div> 
    </div> 
    </body>

CSS是：

.glyphicon { 
    width: 100%; 
    color: green; 
    border: 3px solid green; 
}

問候。

來源

2015-07-10 user3181983

glyphicons就像字符...你應該嘗試設置字體大小設置圖標大小...但試着把它與100％的寬度將是有點棘手... – Julo0sS

只有「真正的方式」做這項工作，不使用媒體查詢和字體大小將使用您的圖形作爲圖像.../img-responsive ... – Julo0sS

你可以試驗' font-size：25vw'改變數字，使字體與包含ele的視口寬度的比例相同換貨。假設元素總是相同的比例。 – Starscream1984

要做到這一點..使圖形明星圖標響應。
你可以這樣做。
用這個來做你想在這裏實現的。
沒有那麼多可以填滿的寬度，但大小，以你需要它做的。希望這有助於。

.star-size { 
    font-size: 8.5vw; 
    color:orangered; 
}

但請閱讀this info。

responsive glyphicon

如果你也想在div塊的高度是reponsive與星形圖標，然後更改.inner-block類此...

.inner-block { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:black; 
}

然後它會像這個。

enter image description here

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>HTML/CSS Block not appearing</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.spacer { 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
}  
 
.block { 
 
    height: 240px; 
 
    padding-top: 15px; 
 
    background-color:orangered; 
 
} 
 
.inner-block { 
 
    height: 120px; 
 
    padding-top: 15px; 
 
    background-color:black; 
 
}  
 
    
 
.star-size { 
 
    font-size: 8.5vw; 
 
    color:orangered; 
 
}  
 
.center-div { 
 
    position: absolute; 
 
    left:0; 
 
    right:0; 
 
    margin:auto; 
 
     
 
}  
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 

 
    
 
<div class="container col-lg-12 spacer"></div> 
 
     
 
    <div class="container block"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 text-center inner-block center-div" > 
 
     <span class="glyphicon glyphicon-star star-size"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 

 
    <!-- Bootstrap core JavaScript --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 

 
    
 
</body> 
 
</html>

來源

2015-07-11 00:46:40 AngularJR

圖形文字實際上是一個特殊字體的字符，所以它們不會像這樣縮放。如果你真的想要這樣做，你應該創建一個圖像，並以width: 100%爲例。

另一種可能（但討厭）解決方案是使用CSS轉換，但它是一個黑客，不會自動調整，需要一些額外的黑客正確定位：

.glyphicon:before { 
    margin-left: 120px; 
    display:inline-block; 
    transform:scale(17,1); 
    -webkit-transform:scale(17,1); 
    -moz-transform:scale(17,1) 
    -ms-transform:scale(17,1); 
    -o-transform:scale(17,1); 
}

例子：http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview

來源

2015-07-10 12:52:43 DavidG

自舉圖形：100％寬度

回答

相關問題